1 <html> 2 <head> 3 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 4 <title>simple-animation</title> 5 <style type="text/css" media="screen"> 6 div { 7 position: relative; 8 left: 10px; 9 top: 10px; 10 width: 200px; 11 height: 200px; 12 background-color: #696; 13 -webkit-transition: left 5s, top 5s; 14 } 15 16 .animate { 17 -webkit-animation-name: simple; 18 -webkit-animation-duration: 2s; 19 -webkit-animation-timing-function: linear; 20 -webkit-animation-fill-mode: backwards; 21 } 22 23 @-webkit-keyframes simple { 24 50% { 25 left: 300px; 26 } 27 100% { 28 left: 80px; 29 } 30 } 31 32 33 </style> 34 <script type="text/javascript" charset="utf-8"> 35 36 function doTransition() { 37 var div = document.querySelector("div"); 38 div.style.left = "200px"; 39 } 40 41 function doAnimation() { 42 var div = document.querySelector("div"); 43 div.className = "animate"; 44 } 45 46 </script> 47 </head> 48 <body> 49 <p>Testing setting an animation while a transition is running, in the 50 case where the animation synthesizes the initial keyframe</p> 51 <p> 52 Start the transition, then start the animation.</p> 53 <p> 54 <a href="https://bugs.webkit.org/show_bug.cgi?id=41188">https://bugs.webkit.org/show_bug.cgi?id=41188</a> 55 </p> 56 <button onclick="doTransition();">Transition</button> 57 <button onclick="doAnimation();">Set Animation</button> 58 <div></div> 59 </body> 60 </html> 61
