<!doctype html> | |
<html> | |
<head> | |
<style> | |
#test1 { | |
animation:test1 3s steps(1,end) 0s 1 normal both | |
} | |
#test2 { | |
animation:test2 3s steps(1,end) 0s 1 normal both | |
} | |
@keyframes test1 { | |
from {visibility: hidden} | |
to {visibility: visible} | |
} | |
@keyframes test2 { | |
from {color: green} | |
to {color: red} | |
} | |
</style> | |
</head> | |
<body> | |
<div id=test1> | |
This shouldn't be initially visible | |
<div>This shouldn't be initially visible</div> | |
</div> | |
<div id=test2> | |
This should be initially green | |
<div>This should be initially green</div> | |
</div> | |
<script> | |
if (window.testRunner) { | |
testRunner.waitUntilDone(); | |
test2.onanimationstart = () => testRunner.notifyDone(); | |
} | |
</script> | |
</body> | |
</html> |