<style> | |
@keyframes slidein { | |
from { | |
width: 50px; | |
} | |
to { | |
width: 200px; | |
} | |
} | |
.animate::after { | |
animation-duration: 0.01s; | |
animation-name: slidein; | |
animation-fill-mode: forwards; | |
} | |
child::after { | |
display: block; | |
border: 2px solid green; | |
width: 50px; | |
height: 50px; | |
content: "after"; | |
} | |
</style> | |
<container> | |
<child> | |
</child> | |
</container> | |
<script> | |
var child = document.querySelector("child"); | |
if (window.testRunner) { | |
testRunner.waitUntilDone(); | |
child.addEventListener("animationend", function () { testRunner.notifyDone(); }, false); | |
} | |
child.className = "animate"; | |
</script> |