• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<html>
2<style>
3div {
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>
62Each section below has two boxes, the top runs on the main thread, the bottom
63on the compositor.
64</p>
65<hr>
66
67These 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
72These 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
77These 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
82These 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
87These 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>
93var transformKeyframes = [
94    {transform: 'translateX(250px)'},
95    {transform: 'translateX(500px)'}
96    ];
97var leftKeyframes = [
98    {left: '250px'},
99    {left: '500px'}
100    ];
101leftAuto.animate(leftKeyframes, {
102    duration: 2000,
103    iterations: 1,
104    fill: 'auto',
105    delay: 1000
106});
107transformAuto.animate(transformKeyframes, {
108    duration: 2000,
109    iterations: 1,
110    fill: 'auto',
111    delay: 1000
112});
113</script>
114</body>
115</html>