Source/WebCore/manual-tests/animation-with-transition.html - WebKit - Git at Google

 <html>
 <head>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   <title>simple-animation</title>
   <style type="text/css" media="screen">
     div {
       position: relative;
       left: 10px;
       top: 10px;
       width: 200px;
       height: 200px;
       background-color: #696;
       -webkit-transition: left 5s, top 5s;
     }

     .animate {
       -webkit-animation-name: simple;
       -webkit-animation-duration: 2s;
       -webkit-animation-timing-function: linear;
       -webkit-animation-fill-mode: backwards;
     }

     @-webkit-keyframes simple {
       50% {
         left: 300px;
       }
       100% {
         left: 80px;
       }
     }


   </style>
   <script type="text/javascript" charset="utf-8">

     function doTransition() {
       var div = document.querySelector("div");
       div.style.left = "200px";
     }

     function doAnimation() {
       var div = document.querySelector("div");
       div.className = "animate";
     }

   </script>
 </head>
 <body>
   <p>Testing setting an animation while a transition is running, in the
     case where the animation synthesizes the initial keyframe</p>
   <p>
     Start the transition, then start the animation.</p>
   <p>
     <a href="https://bugs.webkit.org/show_bug.cgi?id=41188">https://bugs.webkit.org/show_bug.cgi?id=41188</a>
   </p>
   <button onclick="doTransition();">Transition</button>
   <button onclick="doAnimation();">Set Animation</button>
 <div></div>
 </body>
 </html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>simple-animation</title>
	<style type="text/css" media="screen">
	div {
	position: relative;
	left: 10px;
	top: 10px;
	width: 200px;
	height: 200px;
	background-color: #696;
	-webkit-transition: left 5s, top 5s;
	}

	.animate {
	-webkit-animation-name: simple;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: backwards;
	}

	@-webkit-keyframes simple {
	50% {
	left: 300px;
	}
	100% {
	left: 80px;
	}
	}


	</style>
	<script type="text/javascript" charset="utf-8">

	function doTransition() {
	var div = document.querySelector("div");
	div.style.left = "200px";
	}

	function doAnimation() {
	var div = document.querySelector("div");
	div.className = "animate";
	}

	</script>
	</head>
	<body>
	<p>Testing setting an animation while a transition is running, in the
	case where the animation synthesizes the initial keyframe</p>
	<p>
	Start the transition, then start the animation.</p>
	<p>
	<a href="https://bugs.webkit.org/show_bug.cgi?id=41188">https://bugs.webkit.org/show_bug.cgi?id=41188</a>
	</p>
	<button onclick="doTransition();">Transition</button>
	<button onclick="doAnimation();">Set Animation</button>
	<div></div>
	</body>
	</html>