third_party/WebKit/ManualTests/animation/compositor-animation-fill.html

   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>