46 lines
1.0 KiB
HTML
46 lines
1.0 KiB
HTML
|
|
<style>
|
|
.box {
|
|
height: 100px;
|
|
width: 0px;
|
|
border-width: 0;
|
|
border-left-width: 200px;
|
|
border-right-width: 200px;
|
|
border-style: solid;
|
|
border-color: blue;
|
|
animation: foo 200ms forwards;
|
|
}
|
|
@keyframes foo {
|
|
0% {
|
|
border-left-color: orange;
|
|
border-right-color: green;
|
|
}
|
|
50% {
|
|
border-left-color: red;
|
|
}
|
|
to {
|
|
border-left-color: orange;
|
|
border-right-color: green;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
if (window.testRunner) {
|
|
window.addEventListener("load", function () {
|
|
const animations = document.querySelector(".box").getAnimations();
|
|
for (let animation of animations) {
|
|
if (animation instanceof CSSAnimation && animation.animationName == "foo") {
|
|
animation.currentTime = 100;
|
|
animation.pause();
|
|
break;
|
|
}
|
|
}
|
|
}, false);
|
|
}
|
|
</script>
|
|
<p>Left side should go orange -> red -> orange, right side should stay green at the end.</p>
|
|
<div class="box">
|
|
</div>
|
|
|