<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>