Specification
[1]
[2]
[3]
[4]
[5]
Compatibility
IE10+, Std
Syntax
<style> #box { animation: 1s ease 0s infinite alternate none running awesome; /* for IE10+, Std */ background: #000; height: 100px; width: 100px; } @keyframes awesome { /* for IE10+, Std */ from { background: red; } 50% { background: green; } to { background: blue; height: 50px; width: 50px; } } </style>
<div id="box"></div>
<script> function listener(event) { Log(event.type); } var box = document.getElementById("box"); box.addEventListener("animationstart", listener); box.addEventListener("animationend", listener); box.addEventListener("animationcancel", listener); box.addEventListener("animationiteration", listener); </script>
Example