time tunnel – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 13:59:07 +0000 en-US hourly 1 The Time Tunnel CSS Animation https://thingography.com/css-time-tunnel/ https://thingography.com/css-time-tunnel/#respond Sun, 18 Mar 2018 20:16:07 +0000 http://thingography.com/?p=2236 .ani-box {width: 100%; height: auto; overflow: hidden; background-color: #000020; animation: bgcc 60s infinite; } .tunnel-box { margin: 0 auto; width: 100%; max-width: 1000px; height: auto; position: relative; padding: 1em 0; } .tunnel { width: 60%; height: auto; margin: 0 auto; text-align: center; } .tunnel img { transform-origin: 50% 50%; animation: tunnel 60s infinite; width: 100%; height: auto; } @keyframes tunnel { 0% {transform: rotate(0deg);} 50% {transform: rotate(14400deg);} 100% {transform: rotate(0deg);} } @keyframes bgcc { 0% {background:#FFF;} 50% {background:#CCC;} 100% {background:#FFF;} }
tunnel

This was one of my first animations while learning CSS – A Television show from the 1960’s – The Time Tunnel.
]]> https://thingography.com/css-time-tunnel/feed/ 0