| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css"> |
| @-webkit-keyframes color-animation { |
| 0% { background:#000; } |
| 100% { background:#fff; } |
| } |
| |
| div { |
| position: absolute; |
| -webkit-transform-style: preserve-3d; |
| } |
| </style> |
| <script type="text/javascript"> |
| function startExperiment() |
| { |
| document.body.style.margin = "0"; |
| document.body.style.webkitAnimationName = "color-animation"; |
| document.body.style.webkitAnimationDuration = "0.5s"; |
| document.body.style.webkitAnimationIterationCount = "infinite"; |
| document.body.style.webkitAnimationDirection = "alternate"; |
| for (var i = 0; i < 2; ++i) { |
| var elem = document.getElementById("elem" + i.toString()); |
| elem.style.opacity = "0.5"; |
| elem.style.width = "100%"; |
| elem.style.height = "900px"; |
| elem.style.webkitTransform = "rotate3d(1,1,0," + ((i + 1) * 10).toString() + "deg)"; |
| elem.style.webkitAnimationName = "color-animation"; |
| elem.style.webkitAnimationDuration = (i + 1).toString() + "s"; |
| elem.style.webkitAnimationIterationCount = "infinite"; |
| } |
| } |
| |
| window.addEventListener('load', startExperiment, false); |
| </script> |
| </head> |
| <body> |
| <div id="elem0"></div> |
| <div id="elem1"></div> |
| </body> |
| </html> |
