47 lines
867 B
HTML
47 lines
867 B
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
.container {
|
||
|
|
margin-left: 100px;
|
||
|
|
margin-top: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.animates {
|
||
|
|
animation: fade 1ms forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
.child {
|
||
|
|
position: relative;
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
background-color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fade {
|
||
|
|
from { opacity: 0; }
|
||
|
|
to { opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container animates">
|
||
|
|
<div class="child"></div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
if (window.testRunner)
|
||
|
|
testRunner.waitUntilDone();
|
||
|
|
|
||
|
|
document.querySelector(".container").addEventListener("animationend", event => {
|
||
|
|
event.target.classList.remove("animates");
|
||
|
|
if (window.testRunner)
|
||
|
|
testRunner.notifyDone();
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|