transition-delay-000-manual.html (1261B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Transition Test: transition-delay - positive number</title> 4 <link rel="author" title="Intel" href="http://www.intel.com"> 5 <link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> 6 <link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-property"> 7 <meta name="assert" content="The 'transition-delay' property set positive number to delay the execution of transition"> 8 <style> 9 #test { 10 background-color: blue; 11 height: 100px; 12 transition-delay: 3s; 13 transition-property: background-color; 14 width: 100px; 15 } 16 </style> 17 <body> 18 <p>Click the blue square below. Test passes if the <strong>color</strong> of square is changed to <strong>green</strong> immediately 19 when the number inside square is <strong>3</strong>.</p> 20 <div id="test">0</div> 21 <script> 22 var clicked = 0; 23 var div = document.getElementById("test"); 24 div.addEventListener("click", function(evt) { 25 if (clicked == 0) { 26 div.setAttribute("style", "background-color: green;"); 27 setInterval(function() { 28 clicked++; 29 div.innerHTML = clicked; 30 }, 1000); 31 } 32 }, false); 33 </script> 34 </body>