animation-direction-004-manual.html (1495B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Animations Test: animation-direction - reverse</title> 4 <link rel="author" title="Intel" href="http://www.intel.com"> 5 <link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-03-24 --> 6 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-direction"> 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 <meta name="flags" content="animated"> 11 <meta name="assert" content="When animation-direction is set to reverse, 12 all iterations of the animation are played in the reverse direction 13 from the way they were specified."> 14 <style> 15 div { 16 animation-name: sample; 17 animation-duration: 10s; 18 animation-direction: reverse; 19 animation-iteration-count: infinite; 20 21 background-color: blue; 22 height: 100px; 23 width: 100px; 24 position: relative; 25 } 26 27 @keyframes sample { 28 from { 29 left: 150px; 30 } 31 to { 32 left: 0px; 33 } 34 } 35 </style> 36 <body> 37 <p> 38 Test passes if there is a filled color square with 'Filler Text', 39 which starts moving from left to right, then back to left again and moves from 40 left to right. This cycle gets repeated. 41 </p> 42 <div>Filler Text</div> 43 </body>