Revision control

1
<body>
2
<style>
3
4
div {
5
width: 100px;
6
height: 100px;
7
background-color: green;
8
}
9
10
div.after::after {
11
content: "";
12
display: block;
13
width: 100px;
14
height: 100px;
15
opacity: 0;
16
background-color: red;
17
transition: opacity 60s;
18
}
19
20
</style>
21
<script>
22
23
// Adding the "after" class on the next frame will yield the ::after pseudo-element.
24
// This should not yield a CSS Transition since there was no previous pseudo-element
25
// style to animate from, although there was a bug in WebKit introduced in r267571
26
// where we would use the host element's current style to consider whether we should
27
// run a CSS Transition here.
28
const element = document.body.appendChild(document.createElement("div"));
29
requestAnimationFrame(() => element.classList.add("after"));
30
31
</script>
32
</body>