Revision control

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
6
#target {
7
width: 100px;
8
height: 100px;
9
background-color: black;
10
animation-name: animation;
11
}
12
13
#other {
14
width: 100px;
15
height: 100px;
16
background-color: black;
17
animation: animation 0.2s infinite;
18
}
19
20
#target.animated {
21
animation-duration: 0.2s;
22
animation-iteration-count: infinite;
23
}
24
25
@keyframes animation {
26
to { margin-left: "100px" };
27
}
28
29
</style>
30
</head>
31
<body>
32
<script src="../resources/testharness.js"></script>
33
<script src="../resources/testharnessreport.js"></script>
34
<div id="target"></div>
35
<div id="other"></div>
36
37
<script>
38
39
async_test(t => {
40
41
const once = { once: true };
42
const target = document.getElementById("target");
43
44
// Start the animation.
45
target.classList.add("animated");
46
target.addEventListener("animationstart", event => {
47
// Now we can cancel this animation.
48
target.classList.remove("animated");
49
target.addEventListener("animationend", event => {
50
// We wait a frame, resume the animation and check it's the same animation.
51
requestAnimationFrame(() => {
52
target.classList.add("animated");
53
target.addEventListener("animationstart", event => t.done(), once);
54
});
55
}, once);
56
}, once);
57
58
}, "A CSS Animation can be canceled and resumed by modifying its animation-duration.");
59
60
</script>
61
</body>
62
</html>