3 <title>Transition End Events</title>
4 <style type="text/css" media="screen">
11 background-color: blue;
12 -webkit-transition-property: -webkit-transform;
13 -webkit-transition-duration: 0.5s;
14 -webkit-transform: translate(100px);
17 <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
18 <script type="text/javascript" charset="utf-8">
19 if (window.layoutTestController) {
20 layoutTestController.dumpAsText();
21 layoutTestController.waitUntilDone();
25 ["-webkit-transform", "box1", "webkitTransitionEnd", 0.5]
28 function startTransition()
30 var boxes = document.body.getElementsByClassName('box');
31 for (var i = 0; i < boxes.length; ++i) {
32 boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
33 boxes[i].style.webkitTransform = 'translate(200px)';
36 window.setTimeout(cleanup, 700);
39 window.addEventListener('load', startTransition, false);
44 <p>Initiating a 500ms transition on the transform property of box1.</p>
47 <div id="box1" class="box"></div>
50 <div id="result"></div>