stacked-neutral-keyframe.html | Explore in Territory

<!DOCTYPE html>
<style>
div {
    position: absolute;
    width: 100px;
    height: 100px;
}

#expectation {
    background: red;
    transform: translateX(100px);
}

#target {
    background: green;
}
</style>
Finished fill forwards animations influence the neutral keyframes of animations on top of them.
<div id="expectation"></div>
<div id="target"></div>
<script>
'use strict';
if (window.testRunner) {
  testRunner.waitUntilDone();
}

target.animate({transform: 'translateX(100px)'}, {fill: 'forwards'});

requestAnimationFrame(() => {
  target.animate({transform: 'translateX(100px)'}, 1e10);
  if (window.testRunner) {
    testRunner.notifyDone();
  }
});
</script>

chromium/third_party/blink/web_tests/animations/stacked-neutral-keyframe.html