5 background-color: green;
11 -webkit-transition-property: height;
12 -webkit-transition-duration:
2s;
18 -webkit-transition-property: width, height;
19 -webkit-transition-duration:
5s;
23 When you click the Change button, the shape will
24 <span id=
"description"></span>.
25 <button style=
"display: block;" onclick=
"transition()">Change
</button>
27 <div id=
"target"></div>
31 {className
:"rectangle", description
:"animate to a large rectangle over 5 seconds."},
32 {className
:"square", description
:"animate to a square over 2 seconds. Try clicking before the first animation finishes and make sure the width doesn't do an ugly jump."},
33 {className
:"", description
:"instantly change to a small square"},
34 {className
:"square", description
:"instantly change into a small rectangle and then animate into a large square over 2 seconds"},
35 {className
:"rectangle", description
:"animate to a large rectangle over 5 seconds"},
36 {className
:"", description
:"instantly change to a small square"}
39 document
.getElementById("description").innerText
= transitions
[0].description
;
43 var target
= document
.getElementById("target");
44 target
.className
= transitions
[state
].className
;
46 if (state
< transitions
.length
)
47 document
.getElementById("description").innerText
= transitions
[state
].description
;
49 document
.getElementById("instructions").innerText
= "Done.";