transition-duration-004-manual.html (1416B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Transitions Test: transition-duration - negative 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.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property"> 7 <meta name="assert" content="A negative value for 'transition-duration renders the declaration invalid which means the transition is immediate."> 8 <style> 9 div { 10 height: 100px; 11 transition-property: width; 12 transition-timing-function: linear; 13 width: 100px; 14 } 15 #ref { 16 background-color: yellow; 17 transition-duration: 2s; 18 } 19 #test { 20 background-color: blue; 21 transition-duration: -2s; 22 } 23 </style> 24 <body> 25 <p>Click the 'Start' button below. Test passes if the width of yellow square grows smoothly but the blue grows immediately.</p> 26 <div id="ref"></div> 27 <div id="test"></div> 28 <button>Start</button> 29 <script> 30 (function() { 31 var button = document.querySelector("button"), 32 test = document.querySelector("#test"), 33 ref = document.querySelector("#ref"); 34 button.addEventListener("click", function(evt) { 35 test.setAttribute("style", "width: 200px;"); 36 ref.setAttribute("style", "width: 200px;"); 37 }, false); 38 })(); 39 </script> 40 </body>