animation-delay-006-manual.html (1347B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Animations Test: animation-delay - initial keyword</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-05-07 --> 6 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay"> 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/#values"> 10 <meta name="flags" content="animated"> 11 <meta name="assert" content="Check that animation-delay property accepts 'initial' keyword."> 12 <style> 13 #contatiner { 14 animation-delay: 5s; 15 } 16 17 #test { 18 animation-name: sample; 19 animation-duration: 10s; 20 animation-delay: initial; 21 22 background-color: blue; 23 height: 100px; 24 width: 100px; 25 position: relative; 26 } 27 28 @keyframes sample { 29 from { 30 left: 150px; 31 } 32 to { 33 left: 0px; 34 } 35 } 36 </style> 37 <body> 38 <p> 39 Test passes if there is a filled blue square with 'Filler Text', 40 which starts moving from right to left upon page load and lasts for a span of 10 seconds. 41 </p> 42 <div id="container"> 43 <div id="test">Filler Text</div> 44 </div> 45 </body>