equal
deleted
inserted
replaced
|
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> |