ManualTests/transition-delay.html

   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>