57 lines
1.2 KiB
HTML
57 lines
1.2 KiB
HTML
<style>
|
|
#overlay {
|
|
position: absolute;
|
|
left: 100px;
|
|
top: 100px;
|
|
width: 200px;
|
|
height: 200px;
|
|
transform: translate(100px);
|
|
background-color: green;
|
|
}
|
|
|
|
#container .child {
|
|
position: absolute;
|
|
left: 150px;
|
|
top: 150px;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: red;
|
|
animation: 5s anim;
|
|
}
|
|
|
|
@keyframes anim {
|
|
0% {
|
|
transform: translate(80%, 0);
|
|
}
|
|
100% {
|
|
transform: translate(80%, 100px);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
|
|
function test() {
|
|
var el = document.getElementById("container");
|
|
var child = document.createElement("div");
|
|
|
|
child.classList.add("child");
|
|
el.appendChild(child);
|
|
setTimeout(function () {
|
|
child.style.webkitAnimationPlayState = "paused";
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}, 10);
|
|
}
|
|
|
|
window.addEventListener("load", function () {
|
|
setTimeout(test, 10);
|
|
}, false);
|
|
</script>
|
|
<body>
|
|
<div id="container"></div>
|
|
<div id="overlay"></div>
|
|
</body>
|
|
</html> |