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 Delay</title>
8    <style>
9      #container {
10        position: absolute;
11        width: 500px;
12        height: 340px;
13        border: 1px solid black;
14      }
15      
16      .box {
17        position: relative;
18        width: 100px;
19        height: 100px;
20        margin: 10px;
21        background-color: #66F;
22        z-index: 0;
23      }
24      
25      #container.slide > .box {
26        -webkit-transform: translateX(380px);
27        -webkit-transition-property: -webkit-transform;
28        -webkit-transition-duration: 2s;
29      }
30      
31      #box1 {
32        -webkit-transition-delay: 200ms;
33      }
34
35      #box2 {
36        -webkit-transition-delay: 2s;
37      }
38
39      #box3 {
40        -webkit-transition-delay: 4s;
41      }
42     </style>
43     
44</head>
45<body>
46<p>Click to animate</p>
47<div id="container" onclick="this.className = 'slide'">
48  <div class="box" id="box1">
49      Delay: 200ms
50  </div>
51  <div class="box" id="box2">
52      Delay: 2s
53  </div>
54  <div class="box" id="box3">
55      Delay: 4s
56  </div>
57</div>
58</body>
59</html>