| <!doctype html> |
| <style> |
| * { |
| margin: 0px; |
| background-color: red; |
| } |
| |
| #box { |
| width: 100px; |
| height: 100px; |
| background-color: blue; |
| |
| animation: flash 1s steps(1, end) 4; |
| } |
| |
| @keyframes flash { |
| 0% { opacity: 1; } |
| 50% { opacity: 0; } |
| 100% { opacity: 1; } |
| } |
| </style> |
| <div id="box"></div> |
| <script> |
| var box = document.getElementById("box"); |
| box.addEventListener("animationstart", onAnimationEvent, false); |
| box.addEventListener("animationiteration", onAnimationEvent, false); |
| box.addEventListener("animationend", onAnimationEvent, false); |
| |
| function onAnimationEvent(event) { |
| console.log("event " + event.type + " at " + Date.now() + "ms"); |
| } |
| </script> |
