Home | History | Annotate | Download | only in animation 
      1 <!doctype html>
      2 <html lang="en">
      3 <head>
      4   <style>
      5     .wrapper {
      6       margin-bottom: 20px;
      7     }
      8     .wrapper div {
      9       height: 18px;
     10       width: 200px;
     11       color: white;
     12     }
     13     .expected {
     14       background-color: red;
     15     }
     16     .animated {
     17       background-color: green;
     18       /* This timing function has value 0 at inputs of 1/3 and 2/3. Chosen because it's very asymmetric about x = y. */
     19       -webkit-animation: move 3000000s 2 cubic-bezier(0.333333, 0.333333, 0.666666, -0.833333) forwards;
     20       margin-bottom: 4px;
     21     }
     22 
     23     .delay_zero {
     24       -webkit-animation-delay: 0s;
     25     }
     26     .delay_one_third {
     27       -webkit-animation-delay: -1000000s;
     28     }
     29     .delay_two_thirds {
     30       -webkit-animation-delay: -2000000s;
     31     }
     32     .delay_three_thirds {
     33       -webkit-animation-delay: -3000000s;
     34     }
     35     .delay_four_thirds {
     36       -webkit-animation-delay: -4000000s;
     37     }
     38     .delay_five_thirds {
     39       -webkit-animation-delay: -5000000s;
     40     }
     41     .delay_six_thirds {
     42       -webkit-animation-delay: -6000000s;
     43     }
     44 
     45     .expected {
     46       -webkit-transform: translateX(100px);    
     47     }
     48     #normal .expected.delay_six_thirds {
     49       -webkit-transform: translateX(200px);
     50     }
     51     #alternate .expected.delay_three_thirds {
     52       -webkit-transform: translateX(200px);
     53     }
     54     #reverse .expected.delay_zero, #reverse .expected.delay_three_thirds {
     55       -webkit-transform: translateX(200px);
     56     }
     57     #alternate-reverse .expected.delay_zero, #alternate-reverse .expected.delay_six_thirds {
     58       -webkit-transform: translateX(200px);
     59     }
     60 
     61     #normal div {
     62       -webkit-animation-direction: normal;
     63     }
     64     #alternate div {
     65       -webkit-animation-direction: alternate;
     66     }
     67     #reverse div {
     68       -webkit-animation-direction: reverse;
     69     }
     70     #alternate-reverse div {
     71       -webkit-animation-direction: alternate-reverse;
     72     }
     73     
     74     @-webkit-keyframes move {
     75       from { -webkit-transform: translateX(100px); }
     76       to   { -webkit-transform: translateX(200px); }
     77     }
     78   </style>
     79 </head>
     80 <body>
     81 <div>
     82   Tests animation direction with timing functions and hardware acceleration.
     83   The green boxes use live animations and each should line up with the red box
     84   immediately above it.
     85 </div>
     86 <div class="wrapper" id="normal">
     87   <div class="expected delay_zero">normal</div>
     88   <div class="animated delay_zero">normal</div>
     89   <div class="expected delay_one_third">normal</div>
     90   <div class="animated delay_one_third">normal</div>
     91   <div class="expected delay_two_thirds">normal</div>
     92   <div class="animated delay_two_thirds">normal</div>
     93   <div class="expected delay_three_thirds">normal</div>
     94   <div class="animated delay_three_thirds">normal</div>
     95   <div class="expected delay_four_thirds">normal</div>
     96   <div class="animated delay_four_thirds">normal</div>
     97   <div class="expected delay_five_thirds">normal</div>
     98   <div class="animated delay_five_thirds">normal</div>
     99   <div class="expected delay_six_thirds">normal</div>
    100   <div class="animated delay_six_thirds">normal</div>
    101 </div>
    102 <div class="wrapper" id="alternate">
    103   <div class="expected delay_zero">alternate</div>
    104   <div class="animated delay_zero">alternate</div>
    105   <div class="expected delay_one_third">alternate</div>
    106   <div class="animated delay_one_third">alternate</div>
    107   <div class="expected delay_two_thirds">alternate</div>
    108   <div class="animated delay_two_thirds">alternate</div>
    109   <div class="expected delay_three_thirds">alternate</div>
    110   <div class="animated delay_three_thirds">alternate</div>
    111   <div class="expected delay_four_thirds">alternate</div>
    112   <div class="animated delay_four_thirds">alternate</div>
    113   <div class="expected delay_five_thirds">alternate</div>
    114   <div class="animated delay_five_thirds">alternate</div>
    115   <div class="expected delay_six_thirds">alternate</div>
    116   <div class="animated delay_six_thirds">alternate</div>
    117 </div>
    118 <div class="wrapper" id="reverse">
    119   <div class="expected delay_zero">reverse</div>
    120   <div class="animated delay_zero">reverse</div>
    121   <div class="expected delay_one_third">reverse</div>
    122   <div class="animated delay_one_third">reverse</div>
    123   <div class="expected delay_two_thirds">reverse</div>
    124   <div class="animated delay_two_thirds">reverse</div>
    125   <div class="expected delay_three_thirds">reverse</div>
    126   <div class="animated delay_three_thirds">reverse</div>
    127   <div class="expected delay_four_thirds">reverse</div>
    128   <div class="animated delay_four_thirds">reverse</div>
    129   <div class="expected delay_five_thirds">reverse</div>
    130   <div class="animated delay_five_thirds">reverse</div>
    131   <div class="expected delay_six_thirds">reverse</div>
    132   <div class="animated delay_six_thirds">reverse</div>
    133 </div>
    134 <div class="wrapper" id="alternate-reverse">
    135   <div class="expected delay_zero">alternate-reverse</div>
    136   <div class="animated delay_zero">alternate-reverse</div>
    137   <div class="expected delay_one_third">alternate-reverse</div>
    138   <div class="animated delay_one_third">alternate-reverse</div>
    139   <div class="expected delay_two_thirds">alternate-reverse</div>
    140   <div class="animated delay_two_thirds">alternate-reverse</div>
    141   <div class="expected delay_three_thirds">alternate-reverse</div>
    142   <div class="animated delay_three_thirds">alternate-reverse</div>
    143   <div class="expected delay_four_thirds">alternate-reverse</div>
    144   <div class="animated delay_four_thirds">alternate-reverse</div>
    145   <div class="expected delay_five_thirds">alternate-reverse</div>
    146   <div class="animated delay_five_thirds">alternate-reverse</div>
    147   <div class="expected delay_six_thirds">alternate-reverse</div>
    148   <div class="animated delay_six_thirds">alternate-reverse</div>
    149 </div>
    150 </body>
    151 </html>
    152