1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
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">
13 border: 1px solid black;
14 -webkit-transition: -webkit-transform 0.5s;
18 transform: translateX(100px);
26 background-color: blue;
27 transform: translateZ(0);
28 -webkit-animation: fade 1s infinite linear alternate;
32 -webkit-animation-play-state: paused;
35 @-webkit-keyframes fade {
36 from { transform: rotate(-20deg); }
37 to { transform: rotate(20deg); }
40 <script type="text/javascript" charset="utf-8">
44 var box = document.querySelectorAll('.box')[0];
45 var container = document.querySelectorAll('.container')[0];
47 window.setTimeout(function() {
48 container.className = 'container';
51 window.setTimeout(function() {
52 container.className = 'container moved';
55 window.setTimeout(function() {
56 container.className = 'container';
60 window.addEventListener('load', runTest, false)
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>