Specification
[1]
[2]
[3]
Compatibility
IE10+, Std
Syntax
<style type="text/css"> #box { animation: name 1s ease-in-out 0s infinite alternate none /*running*/; /* for IE10+, Std */ background: #000; height: 100px; width: 100px; } @keyframes name { /* for IE10+, Std */ from { background: red; } 50% { background: green; } to { background: blue; border-radius: 10px; height: 50px; opacity: 0.5; transform: rotate(360deg); width: 50px; } } </style>
<div id="box"></div>
<script type="text/javascript"> function listener(e) { switch (e.type) { case "animationstart": $4what.log("animationstart: " + e.elapsedTime); break; case "animationend": $4what.log("animationend: " + e.elapsedTime); break; case "animationiteration": $4what.log("animationiteration: " + e.elapsedTime); break; } } var box = document.getElementById("box"); box.addEventListener("animationstart", listener, false); box.addEventListener("animationend", listener, false); box.addEventListener("animationiteration", listener, false); </script>
Example