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