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>
