1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 4 <html lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>Transitions and paused animations</title> 8 <style type="text/css" media="screen"> 9 10 .container { 11 height: 200px; 12 width: 200px; 13 border: 1px solid black; 14 -webkit-transition: -webkit-transform 0.5s; 15 } 16 17 .moved { 18 -webkit-transform: translateX(100px); 19 20 } 21 .box { 22 position: relative; 23 height: 100px; 24 width: 100px; 25 margin: 50px; 26 background-color: blue; 27 -webkit-transform: translateZ(0); 28 -webkit-animation: fade 1s infinite linear alternate; 29 } 30 31 .moved .box { 32 -webkit-animation-play-state: paused; 33 } 34 35 @-webkit-keyframes fade { 36 from { -webkit-transform: rotate(-20deg); } 37 to { -webkit-transform: rotate(20deg); } 38 } 39 </style> 40 <script type="text/javascript" charset="utf-8"> 41 42 function runTest() 43 { 44 var box = document.querySelectorAll('.box')[0]; 45 var container = document.querySelectorAll('.container')[0]; 46 47 window.setTimeout(function() { 48 container.className = 'container'; 49 }, 250); 50 51 window.setTimeout(function() { 52 container.className = 'container moved'; 53 }, 1500); 54 55 window.setTimeout(function() { 56 container.className = 'container'; 57 }, 3000); 58 } 59 60 window.addEventListener('load', runTest, false) 61 </script> 62 </head> 63 <body> 64 65 <p>Box should animate smoothly left, then right then left again, and not jump at the end.</p> 66 <div class="container moved"> 67 <div class="box"></div> 68 </div> 69 70 </body> 71 </html> 72
