blob: 9538ffa85f9496fed937bc195bb81dae099abad1 [file] [log] [blame]
<html>
<style>
div {
position: relative;
height: 100px;
width: 100px;
background: blue;
transform: translateZ(0);
-webkit-animation-direction: alternate;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
}
.fill-both {
-webkit-animation-fill-mode: both;
}
.fill-none {
-webkit-animation-fill-mode: none;
}
.fill-forwards {
-webkit-animation-fill-mode: forwards;
}
.fill-backwards {
-webkit-animation-fill-mode: backwards;
}
.anim-left {
-webkit-animation-name: anim-left;
z-index: 100;
}
.anim-transform {
-webkit-animation-name: anim-transform;
z-index: 200;
}
@-webkit-keyframes anim-left {
0% {
left: 250px;
}
100% {
left: 500px;
}
}
@-webkit-keyframes anim-transform {
0% {
transform: translateX(250px);
}
100% {
transform: translateX(500px);
}
}
</style>
<body>
<p>
Each section below has two boxes, the top runs on the main thread, the bottom
on the compositor.
</p>
<hr>
These boxes should start in the middle and finish at the end (both fill)
<br>
<div class="anim-left fill-both">MT</div>
<div class="anim-transform fill-both">CT</div>
These boxes should start in the middle and finish at the start (backwards fill)
<br>
<div class="anim-left fill-backwards">MT</div>
<div class="anim-transform fill-backwards">CT</div>
These boxes appear on the left and jump to the middle and finish at the end (forwards fill)
<br>
<div class="anim-left fill-forwards">MT</div>
<div class="anim-transform fill-forwards">CT</div>
These boxes appear on the left and jump to the middle and finish at the start (none fill)
<br>
<div class="anim-left fill-none">MT</div>
<div class="anim-transform fill-none">CT</div>
These boxes appear on the left and jump to the middle and finish at the start (auto fill)
<br>
<div id="leftAuto">MT</div>
<div id="transformAuto">CT</div>
<script>
var transformKeyframes = [
{transform: 'translateX(250px)'},
{transform: 'translateX(500px)'}
];
var leftKeyframes = [
{left: '250px'},
{left: '500px'}
];
leftAuto.animate(leftKeyframes, {
duration: 2000,
iterations: 1,
fill: 'auto',
delay: 1000
});
transformAuto.animate(transformKeyframes, {
duration: 2000,
iterations: 1,
fill: 'auto',
delay: 1000
});
</script>
</body>
</html>