1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2   "http://www.w3.org/TR/html4/loose.dtd">
3
4<html lang="en">
5<head>
6  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7  <title>Transition Events</title>
8  <style type="text/css" media="screen">
9    #box1 {
10      position: relative;
11      width: 100px;
12      height: 100px;
13      margin: 10px;
14      background-color: blue;
15      z-index: 0;
16      -webkit-transition-property: left;
17      -webkit-transition-duration: 2s;
18      left: 0px;
19    }
20
21    #box2 {
22      position: relative;
23      width: 100px;
24      height: 100px;
25      margin: 10px;
26      background-color: red;
27      z-index: 0;
28      -webkit-transition-property: left;
29      -webkit-transition-duration: 2s;
30      left: 0px;
31    }
32
33    #log {
34      position: absolute;
35      width: 90%;
36      height: 200px;
37      overflow: scroll;
38      border: 1px solid black;
39    }
40  </style>
41  <script type="text/javascript" charset="utf-8">
42
43    var switch1 = true;
44    var switch2 = false;
45    
46    document.addEventListener('webkitTransitionEnd', function(e) {
47      var id = "1";
48      if (switch1) {
49        id = "2";
50      }
51      var offset = 200;
52      if (switch2) {
53        offset = 0;
54      }
55      var box = document.getElementById("box" + id);
56      box.style.left = "" + offset + "px";
57      switch1 = !switch1;
58      if (!switch1) switch2 = !switch2;
59      logTransition(event);
60    }, false);
61
62    function doClick(obj)
63    {
64      var box1 = document.getElementById("box1");
65      box1.style.left = "200px";
66    }
67
68    function logTransition(event)
69    {
70      var log = document.getElementById('log');
71      log.innerHTML = log.innerHTML + '<br>Property: ' + event.propertyName + ' Time: ' + event.elapsedTime;
72    }
73  </script>
74</head>
75<body>
76  <h2>Transition Events</h2>
77  <p>Click to start transitions. Once started, transition end events should keep
78    things moving forever.</p>
79  <div id="container" onclick="doClick(this)">
80    <div id="box1">
81    </div>
82    <div id="box2">
83    </div>
84  </div>
85
86  <div id="log">
87    
88  </div>
89</body>
90</html>
91