{"id":2236,"date":"2018-03-18T20:16:07","date_gmt":"2018-03-18T20:16:07","guid":{"rendered":"http:\/\/thingography.com\/?p=2236"},"modified":"2018-11-06T13:59:07","modified_gmt":"2018-11-06T13:59:07","slug":"css-time-tunnel","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-time-tunnel\/","title":{"rendered":"The Time Tunnel CSS Animation"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height: auto; overflow: hidden;\n   \tbackground-color: #000020;\n\tanimation: bgcc 60s infinite;\n}\n.tunnel-box {\n\tmargin: 0 auto;\n\twidth: 100%;\n\tmax-width: 1000px;\n\theight: auto;\n\tposition: relative;\n\tpadding: 1em 0;\n}\n.tunnel {\n\twidth: 60%;\n\theight: auto;\n\tmargin: 0 auto;\n\ttext-align: center;\n}\n.tunnel img {\n    transform-origin: 50% 50%;\n   \tanimation: tunnel 60s infinite;\n   \twidth: 100%; height: auto;\n}\n@keyframes tunnel {\n\t0%   {transform: rotate(0deg);}\n\t50%  {transform: rotate(14400deg);}\n\t100% {transform: rotate(0deg);}\n}\n@keyframes bgcc {\n\t0%   {background:#FFF;}\n\t50%  {background:#CCC;}\n\t100% {background:#FFF;}\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"tunnel-box\">\n<div class=\"tunnel\"> <img decoding=\"async\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/time-tunnel\/tunnel.png\" alt=\"tunnel\" \/><\/div>\n<\/p><\/div>\n<\/div>\n<p> <!-- Ani-box  --><\/p>\n<div class=\"below-ani\">\nThis was one of my first animations while learning CSS &#8211; A Television show from the 1960&#8217;s &#8211; The Time Tunnel.\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This was one of my first animations while learning CSS &#8211; A Television show from the 1960&#8217;s &#8211; The Time Tunnel.<\/p>\n","protected":false},"author":2,"featured_media":2619,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,29,216],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2236"}],"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=2236"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2236\/revisions"}],"predecessor-version":[{"id":2241,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2236\/revisions\/2241"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2619"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}