{"id":2393,"date":"2018-03-26T17:46:51","date_gmt":"2018-03-26T17:46:51","guid":{"rendered":"http:\/\/thingography.com\/?p=2393"},"modified":"2025-02-13T20:46:08","modified_gmt":"2025-02-13T20:46:08","slug":"css-transition","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-transition\/","title":{"rendered":"CSS Page Transition Animation"},"content":{"rendered":"<style>\n.ani-box {\n\tmargin: 0 auto;\n\twidth: 100%;\n\theight: auto;\n\tposition: relative;\n\tpadding-bottom: 2em;\n\ttop: 0;\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"text\">\n<p class=\"scene\"> Page One &#8211; Losira Out <\/p>\n<p><\/p>\n<p>\n\t\t\tThese examples of true transitional web pages are based on the  Curtains and Transitional Advertisements demos.  Web pages can be transitioned for enhanced<br \/>\n\t\t\tviewing just as photos are transitioned.   <\/p>\n<p>\t\t \tTrekies will remember the beautiful Kalandan Commander &#8211; Losira &#8211; whom inspired the first transition style.<\/p>\n<div class=\"demo2\">First choose the movement direction of the ad&#8230;<br \/>\n\t<a id=\"currentd\" class=\"butt5\" href=\"#\"> Losira Out <\/a><a class=\"butt5\" href=\"index-3.htm\"> Scale Out <\/a><a class=\"butt5\" href=\"index-5.htm\"> Rotate Out<\/a>\n<\/div>\n<div class=\"demo\">\n\t<button id=\"currentp\" class=\"butt1\" >Page 1<\/button><button class=\"butt2\" title=\"Click to play the 'Lorisa effect' audio and go to the next page\">Page 2<\/button>\n<\/div>\n<p>\n\t\t\tContinued on page two&#8230;.\n\t\t<\/p>\n<\/p><\/div>\n<\/div>\n<p> <!-- Close  Ani  --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Page One &#8211; Losira Out These examples of true transitional web pages are based on the Curtains and Transitional Advertisements demos. Web pages can be transitioned for enhanced viewing just as photos are transitioned. Trekies will remember the beautiful Kalandan<\/p>\n","protected":false},"author":2,"featured_media":2616,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-transition-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,230,231],"class_list":["post-2393","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-css","tag-css-animation","tag-page-transition","tag-transition"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=2393"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2393\/revisions"}],"predecessor-version":[{"id":3805,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2393\/revisions\/3805"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2616"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}