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     transform: translateZ(0);
      9     -webkit-animation-direction: alternate;
     10     -webkit-animation-duration: 2s;
     11     -webkit-animation-timing-function: linear;
     12     -webkit-animation-iteration-count: 1;
     13     -webkit-animation-delay: 1s;
     14 }
     15 
     16 .fill-both {
     17     -webkit-animation-fill-mode: both;
     18 }
     19 
     20 .fill-none {
     21     -webkit-animation-fill-mode: none;
     22 }
     23 
     24 .fill-forwards {
     25     -webkit-animation-fill-mode: forwards;
     26 }
     27 
     28 .fill-backwards {
     29     -webkit-animation-fill-mode: backwards;
     30 }
     31 
     32 .anim-left {
     33     -webkit-animation-name: anim-left;
     34     z-index: 100;
     35 }
     36 
     37 .anim-transform {
     38     -webkit-animation-name: anim-transform;
     39     z-index: 200;
     40 }
     41 
     42 @-webkit-keyframes anim-left {
     43     0% {
     44         left: 250px;
     45     }
     46     100% {
     47         left: 500px;
     48     }
     49 }
     50 
     51 @-webkit-keyframes anim-transform {
     52     0% {
     53         transform: translateX(250px);
     54     }
     55     100% {
     56         transform: translateX(500px);
     57     }
     58 }
     59 </style>
     60 <body>
     61 <p>
     62 Each section below has two boxes, the top runs on the main thread, the bottom
     63 on the compositor.
     64 </p>
     65 <hr>
     66 
     67 These boxes should start in the middle and finish at the end (both fill)
     68 <br>
     69 <div class="anim-left fill-both">MT</div>
     70 <div class="anim-transform fill-both">CT</div>
     71 
     72 These boxes should start in the middle and finish at the start (backwards fill)
     73 <br>
     74 <div class="anim-left fill-backwards">MT</div>
     75 <div class="anim-transform fill-backwards">CT</div>
     76 
     77 These boxes appear on the left and jump to the middle and finish at the end (forwards fill)
     78 <br>
     79 <div class="anim-left fill-forwards">MT</div>
     80 <div class="anim-transform fill-forwards">CT</div>
     81 
     82 These boxes appear on the left and jump to the middle and finish at the start (none fill)
     83 <br>
     84 <div class="anim-left fill-none">MT</div>
     85 <div class="anim-transform fill-none">CT</div>
     86 
     87 These boxes appear on the left and jump to the middle and finish at the start (auto fill)
     88 <br>
     89 <div id="leftAuto">MT</div>
     90 <div id="transformAuto">CT</div>
     91 
     92 <script>
     93 var transformKeyframes = [
     94     {transform: 'translateX(250px)'},
     95     {transform: 'translateX(500px)'}
     96     ];
     97 var leftKeyframes = [
     98     {left: '250px'},
     99     {left: '500px'}
    100     ];
    101 leftAuto.animate(leftKeyframes, {
    102     duration: 2000,
    103     iterations: 1,
    104     fill: 'auto',
    105     delay: 1000
    106 });
    107 transformAuto.animate(transformKeyframes, {
    108     duration: 2000,
    109     iterations: 1,
    110     fill: 'auto',
    111     delay: 1000
    112 });
    113 </script>
    114 </body>
    115 </html>