compositor-animation-fill.html | Explore in Territory

<html>
<style>
div {
    position: relative;
    height: 100px;
    width: 100px;
    background: blue;
    transform: translateZ(0);
    animation-direction: alternate;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-delay: 1s;
}

.fill-both {
    animation-fill-mode: both;
}

.fill-none {
    animation-fill-mode: none;
}

.fill-forwards {
    animation-fill-mode: forwards;
}

.fill-backwards {
    animation-fill-mode: backwards;
}

.anim-left {
    animation-name: anim-left;
    z-index: 100;
}

.anim-transform {
    animation-name: anim-transform;
    z-index: 200;
}

@keyframes anim-left {
    0% {
        left: 250px;
    }
    100% {
        left: 500px;
    }
}

@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>
chromium/third_party/blink/manual_tests/animation/compositor-animation-fill.html
