32 lines
883 B
HTML
32 lines
883 B
HTML
|
<body>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
div {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
background-color: green;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.after::after {
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
opacity: 0;
|
||
|
|
background-color: red;
|
||
|
|
transition: opacity 60s;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// Adding the "after" class on the next frame will yield the ::after pseudo-element.
|
||
|
|
// This should not yield a CSS Transition since there was no previous pseudo-element
|
||
|
|
// style to animate from, although there was a bug in WebKit introduced in r267571
|
||
|
|
// where we would use the host element's current style to consider whether we should
|
||
|
|
// run a CSS Transition here.
|
||
|
|
const element = document.body.appendChild(document.createElement("div"));
|
||
|
|
requestAnimationFrame(() => element.classList.add("after"));
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|