LayoutTests/animations/animation-followed-by-transition.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <style>
         #test {
             position: absolute;
             top: 100px;
             left: 100px;
             height: 100px;
             width: 100px;
             background: green;
             transition: transform 40ms;
             transform: translate3d(0,0,0);
             animation: slideInUp 50ms;
         }

         #test.trans {
             transform: translateX(200%);
         }

         @keyframes slideInUp {
             0% {
                 transform: translate3d(-100%, 0, 0);
             }
             100% {
                 transform: translate3d(0, 0, 0);
             }
         }
     </style>
 </head>
 <body>
     <div id="test"></div>
 <p>Should see animationend followed by transitionend.</p>
 <pre id="logging"></pre>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }

         function doLog(s)
         {
             document.getElementById('logging').textContent += s + '\n';
         }

         var testDiv = document.getElementById('test');
         testDiv.addEventListener("transitionend", function() {
             doLog("transitionend");
             if (window.testRunner)
                 testRunner.notifyDone();
         });

         testDiv.addEventListener("animationend", function() {
             doLog("animationend");
             window.setTimeout(function() {
                 testDiv.classList.add('trans');
             }, 0)

             // Watchdog timer.
             window.setTimeout(function() {
                 if (window.testRunner)
                     testRunner.notifyDone();
             }, 500)
         });
     </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#test {
	position: absolute;
	top: 100px;
	left: 100px;
	height: 100px;
	width: 100px;
	background: green;
	transition: transform 40ms;
	transform: translate3d(0,0,0);
	animation: slideInUp 50ms;
	}

	#test.trans {
	transform: translateX(200%);
	}

	@keyframes slideInUp {
	0% {
	transform: translate3d(-100%, 0, 0);
	}
	100% {
	transform: translate3d(0, 0, 0);
	}
	}
	</style>
	</head>
	<body>
	<div id="test"></div>
	<p>Should see animationend followed by transitionend.</p>
	<pre id="logging"></pre>
	<script>
	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}

	function doLog(s)
	{
	document.getElementById('logging').textContent += s + '\n';
	}

	var testDiv = document.getElementById('test');
	testDiv.addEventListener("transitionend", function() {
	doLog("transitionend");
	if (window.testRunner)
	testRunner.notifyDone();
	});

	testDiv.addEventListener("animationend", function() {
	doLog("animationend");
	window.setTimeout(function() {
	testDiv.classList.add('trans');
	}, 0)

	// Watchdog timer.
	window.setTimeout(function() {
	if (window.testRunner)
	testRunner.notifyDone();
	}, 500)
	});
	</script>
	</body>
	</html>