animation-iteration-event-manual.html (1911B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Animations Test: animation events - animationiteration</title> 4 <link rel="author" title="Nokia Inc." href="http://www.nokia.com"> 5 <link rel="author" title="Intel" href="http://www.intel.com"> 6 <link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-06 --> 7 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name"> 8 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration"> 9 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count"> 10 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#events"> 11 <meta name="flags" content="animated"> 12 <meta name="assert" content="Check that animationiteration event occurs at the end of 13 each iteration of an animation for which animation-iteration-count 14 is greater than one."> 15 <style> 16 div { 17 animation-name: sample; 18 animation-duration: 10s; 19 animation-iteration-count: 3; 20 21 color: yellow; 22 font-weight: bolder; 23 font-size: xx-large; 24 text-align: center; 25 26 background-color: blue; 27 height: 100px; 28 width: 100px; 29 position: relative; 30 } 31 32 @keyframes sample { 33 from { 34 left: 150px; 35 } 36 to { 37 left: 0px; 38 } 39 } 40 </style> 41 <body> 42 <p> 43 Test passes if there is a filled blue square, which moves from right to left 44 three times; and if the square contains digit 1 for the first animation, 45 digit 2 for the second, and 3 for the third animation. 46 </p> 47 <div></div> 48 <script> 49 var count = 1; 50 var div = document.getElementsByTagName("div"); 51 div[0].innerHTML = count; 52 div[0].addEventListener("animationiteration", animationIteration, true); 53 54 function animationIteration() { 55 count += 1; 56 div[0].innerHTML = count; 57 } 58 </script> 59 </body>