Revision control

1
<style>
2
3
div {
4
position: absolute;
5
top: 0;
6
left: 0;
7
width: 100px;
8
height: 100px;
9
background-color: black;
10
11
will-change: transform;
12
translate: 100px 100px;
13
rotate: 180deg;
14
scale: 0.5;
15
transform: translate(-50px -50px);
16
17
animation-name: translate, rotate, scale, transform;
18
animation-delay: 1000s;
19
animation-duration: 1000s;
20
}
21
22
div::after {
23
content: "";
24
position: absolute;
25
left: 0;
26
top: 0;
27
width: 100%;
28
height: 50%;
29
background-color: gray;
30
}
31
32
@keyframes translate {
33
from { translate: 200px 200px }
34
to { scale: 200px 200px }
35
}
36
37
@keyframes rotate {
38
from { rotate: 90deg }
39
to { rotate: 90deg }
40
}
41
42
@keyframes scale {
43
from { scale: 2 }
44
to { scale: 2 }
45
}
46
47
@keyframes transform {
48
from { transform: translate(200px, 200px) }
49
to { transform: translate(200px, 200px) }
50
}
51
52
</style>
53
<div></div>
54
<script src="resources/wait-until-animations-are-committed.js"></script>