LayoutTests/webanimations/no-transition-on-after-pseudo-element-upon-creation.html - WebKit - Git at Google

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