Revision control

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
6
.container {
7
margin-left: 100px;
8
margin-top: 100px;
9
}
10
11
.animates {
12
animation: fade 1ms forwards;
13
}
14
15
.child {
16
position: relative;
17
width: 100px;
18
height: 100px;
19
background-color: black;
20
}
21
22
@keyframes fade {
23
from { opacity: 0; }
24
to { opacity: 1; }
25
}
26
27
</style>
28
</head>
29
<body>
30
<div class="container animates">
31
<div class="child"></div>
32
</div>
33
<script>
34
35
if (window.testRunner)
36
testRunner.waitUntilDone();
37
38
document.querySelector(".container").addEventListener("animationend", event => {
39
event.target.classList.remove("animates");
40
if (window.testRunner)
41
testRunner.notifyDone();
42
});
43
44
</script>
45
</body>
46
</html>