animation-delay-007-manual.html (1375B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Animations Test: animation-delay - inherit 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 'inherit' keyword."> 12 <style> 13 #container { 14 animation-delay: 5s; 15 } 16 17 #test { 18 animation-name: sample; 19 animation-duration: 5s; 20 animation-delay: inherit; 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 staying left for about 5 seconds, and then moves 41 from right to left and lasts for a span of 5 seconds. 42 </p> 43 <div id="container"> 44 <div id="test">Filler Text</div> 45 </div> 46 </body>