<head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/Zeaklous/pen/IdlHx" /> <style class="cp-pen-styles">.rotator { width: 100px; height: 100px; margin: 20px; background-color:teal; } .transition { -webkit-transition: all 1000s linear; -moz-transition: all 1000s linear; -ms-transition: all 1000s linear; -o-transition: all 1000s linear; transition: all 1000s linear; } .translateAnimationClass { -webkit-transform: rotateX(43200deg) rotateY(14400deg); -moz-transform: rotateX(43200deg) rotateY(14400deg); -ms-transform: rotateX(43200deg) rotateY(14400deg); -o-transform: rotateX(43200deg) rotateY(14400deg); transform: rotateX(43200deg) rotateY(14400deg); } .animation { -webkit-animation: rotator 25s linear infinite; -moz-animation: rotator 25s linear infinite; -ms-animation: rotator 25s linear infinite; -o-animation: rotator 25s linear infinite; animation: rotator 25s linear infinite; } @-webkit-keyframes rotator { 0% { -webkit-transform: rotateX(0deg) rotateY(0deg); } 100% { -webkit-transform: rotateX(1080deg) rotateY(360deg); } } @-moz-keyframes rotator { 0% { -moz-transform: rotateX(0deg) rotateY(0deg); } 100% { -moz-transform: rotateX(1080deg) rotateY(360deg); } } @-ms-keyframes rotator { 0% { -ms-transform: rotateX(0deg) rotateY(0deg); } 100% { -ms-transform: rotateX(1080deg) rotateY(360deg); } } @-o-keyframes rotator { 0% { -o-transform: rotateX(0deg) rotateY(0deg); } 100% { -o-transform: rotateX(1080deg) rotateY(360deg); } } @keyframes rotator { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(1080deg) rotateY(360deg); } } </style></head><body> <h3>But... Which is the animation?</h3> <div class='rotator animation'></div> <h3>Is it this one?</h3> <div class='rotator transition'></div> <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'></script> <script>window.onload = function () { document.getElementsByClassName('transition')[0].classList.add('translateAnimationClass'); }; //# sourceURL=pen.js </script> </body> |