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>