Home | History | Annotate | Download | only in animation 
      1 <html>
      2 <style>
      3 div {
      4     position: relative;
      5     height: 100px;
      6     width: 100px;
      7     background: blue;
      8     -webkit-transform: translateZ(0);
      9     -webkit-animation-duration: 2s;
     10     -webkit-animation-timing-function: linear;
     11     -webkit-animation-fill-mode: both;
     12     -webkit-animation-iteration-count: 2;
     13 }
     14 
     15 .test0 {
     16     -webkit-animation-direction: normal;
     17 }
     18 
     19 .test1 {
     20      -webkit-animation-direction: reverse;
     21 }
     22 
     23 .test2 {
     24      -webkit-animation-direction: alternate;
     25 }
     26 
     27 .test3 {
     28      -webkit-animation-direction: reverse;
     29 }
     30 
     31 .anim-left {
     32     -webkit-animation-name: anim-left;
     33     z-index: 100;
     34 }
     35 
     36 .anim-transform {
     37     -webkit-animation-name: anim-transform;
     38     z-index: 200;
     39 }
     40 
     41 @-webkit-keyframes anim-left {
     42     0% {
     43         left: 0px;
     44     }
     45     100% {
     46         left: 300px;
     47     }
     48 }
     49 
     50 @-webkit-keyframes anim-transform {
     51     0% {
     52         -webkit-transform: translateX(0px);
     53     }
     54     100% {
     55         -webkit-transform: translateX(300px);
     56     }
     57 }
     58 </style>
     59 <body>
     60 <p>
     61 Each section below has two boxes, the top runs on the main thread, the bottom
     62 on the compositor. The animations should be identical but start at different
     63 times.
     64 </p><p>
     65 This test is successful if the boxes are mostly in sync (there might be a small
     66 offset between them).
     67 </p>
     68 <hr>
     69 
     70 Direction normal
     71 <br>
     72 <div class='test0 anim-left'></div>
     73 <div class='test0 anim-transform'></div>
     74 
     75 Direction reverse
     76 <br>
     77 <div class='test1 anim-left'></div>
     78 <div class='test1 anim-transform'></div>
     79 
     80 Direction alternate
     81 <br>
     82 <div class='test2 anim-left'></div>
     83 <div class='test2 anim-transform'></div>
     84 
     85 Direction alternate-reverse
     86 <br>
     87 <div class='test3 anim-left'></div>
     88 <div class='test3 anim-transform'></div>
     89 
     90 </body>
     91 </html>
     92