Last active
December 15, 2015 17:49
-
-
Save basecode/5298961 to your computer and use it in GitHub Desktop.
CSS animations off the UI thread
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>CSS animations</title> | |
| <style> | |
| .spin { | |
| -webkit-animation: 3s rotate linear infinite; | |
| animation: 3s rotate linear infinite; | |
| background: red; | |
| } | |
| .walkabout-old-school { | |
| -webkit-animation: 3s slide-margin linear infinite; | |
| animation: 3s slide-margin linear infinite; | |
| background: blue; | |
| } | |
| .walkabout-new-school { | |
| -webkit-animation: 3s slide-transform linear infinite; | |
| animation: 3s slide-transform linear infinite; | |
| background: green; | |
| } | |
| .walkabout-steps-new-school { | |
| -webkit-animation: 3s slide-transform steps(10) infinite; | |
| animation: 3s slide-transform steps(10) infinite; | |
| background: violet; | |
| } | |
| /* keyframes */ | |
| @keyframes rotate { | |
| from {transform: rotate(0deg);} | |
| to {transform: rotate(360deg);} | |
| } | |
| @keyframes slide-transform { | |
| from {transform: translatex(0);} | |
| 50% {transform: translatex(300px);} | |
| to {transform: translatex(0);} | |
| } | |
| @keyframes slide-margin { | |
| from {margin-left: 0;} | |
| 50% {margin-left: 100%;} | |
| to {margin-left: 0;} | |
| } | |
| /* same keyframes, prefixed */ | |
| @-webkit-keyframes rotate { | |
| from {-webkit-transform: rotate(0deg);} | |
| to {-webkit-transform: rotate(360deg);} | |
| } | |
| @-webkit-keyframes slide-transform { | |
| from {-webkit-transform: translatex(0);} | |
| 50% {-webkit-transform: translatex(300px);} | |
| to {-webkit-transform: translatex(0);} | |
| } | |
| @-webkit-keyframes slide-margin { | |
| from {margin-left: 0;} | |
| 50% {margin-left: 100%;} | |
| to {margin-left: 0;} | |
| } | |
| div { | |
| width: 30px; | |
| height: 30px; | |
| } | |
| </style> | |
| <script> | |
| function kill() { | |
| var start = +new Date; | |
| console.log("" + new Date()); | |
| while (+new Date - start < 2000){} | |
| console.log("" + new Date()); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <p><button onclick="kill()">kill 'em all for 2 sec</button></p> | |
| <p><div class="spin"></div> | |
| <p><div class="walkabout-old-school"></div> | |
| <p><div class="walkabout-new-school"></div> | |
| <p><div class="walkabout-steps-new-school"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
CSS animations off the UI thread
This test shows that CSS Animations are rendered off the UI thread. Read more about it in @stoyan's blogpost.
Original source: http://www.phpied.com/files/css-thread/thread.html