animation-direction-005-manual.html (1404B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Animations Test: animation-direction - ::after</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="Check that animation-direction applies to the ::after pseudo element."> 12 <style> 13 div::after { 14 animation-name: sample; 15 animation-duration: 10s; 16 animation-direction: alternate; 17 animation-iteration-count: infinite; 18 19 background-color: blue; 20 content: "Filler Text"; 21 display: block; 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 blue square with 'Filler Text', 39 which starts moving from right to left on the page load, 40 and then moves from left to right. This cycle gets repeated. 41 </p> 42 <div></div> 43 </body>