1 <style> 2 div { 3 width: 50px; 4 height: 50px; 5 background-color: yellow; 6 } 7 8 div.green { 9 width: 100px; 10 background-color: green; 11 -webkit-transition-property: background-color; 12 -webkit-transition-duration: 5s; 13 } 14 15 div.square { 16 width: 100px; 17 height: 100px; 18 -webkit-transition-property: height; 19 -webkit-transition-duration: 2s; 20 } 21 </style> 22 <p id="instructions"> 23 When you click the Change button, the shape will 24 <span id="description"></span>. 25 <button style="display: block;" onclick="transition()">Change</button> 26 </p> 27 <div id="target"></div> 28 <script> 29 var state = 0; 30 var transitions = [ 31 {className:"green", description:"instantly change into a rectangle and fade from yellow to green over 5 seconds"}, 32 {className:"", description:"instantly change into a small yellow square"}, 33 {className:"square", description:"instantly change into a yellow rectangle and then animate into a big yellow square over 2 seconds"}, 34 {className:"green", description:"instantly change into a yellow rectangle and then animate to a green rectangle over 5 seconds"}, 35 {className:"", description:"instantly change into a small yellow square"}, 36 {className:"green", description:"instantly change into a yellow rectangle and fade from yellow to green over 5 seconds"}, 37 {className:"square", description:"instantly change to a yellow rectangle and then animate into a large yellow square over 2 seconds"}, 38 {className:"", description:"instantly change into a small yellow square"} 39 ]; 40 41 document.getElementById("description").innerText = transitions[0].description; 42 43 function transition() 44 { 45 var target = document.getElementById("target"); 46 target.className = transitions[state].className; 47 state++; 48 if (state < transitions.length) 49 document.getElementById("description").innerText = transitions[state].description; 50 else { 51 document.getElementById("instructions").innerText = "Done."; 52 } 53 } 54 </script> 55
