animation-direction-002-manual.html (1482B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Animations Test: animation-direction - normal</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-03-24 --> 7 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-direction"> 8 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name"> 9 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration"> 10 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count"> 11 <meta name="flags" content="animated"> 12 <meta name="assert" content="When animation-direction is set to normal, 13 all iterations of animation are played as specified."> 14 <style> 15 div { 16 animation-name: sample; 17 animation-duration: 10s; 18 animation-direction: normal; 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 right to left, then back to right and moves from 40 right to left again. This cycle gets repeated. 41 </p> 42 <div>Filler Text</div> 43 </body>