3 <meta http-equiv=
"Content-type" content=
"text/html; charset=utf-8">
4 <title>simple-animation
</title>
5 <style type=
"text/css" media=
"screen">
12 background-color: #
696;
13 -webkit-transition: left
5s, top
5s;
17 -webkit-animation-name: simple;
18 -webkit-animation-duration:
2s;
19 -webkit-animation-timing-function: linear;
20 -webkit-animation-fill-mode: backwards;
23 @-webkit-keyframes simple {
34 <script type=
"text/javascript" charset=
"utf-8">
36 function doTransition() {
37 var div = document.querySelector(
"div");
38 div.style.left =
"200px";
41 function doAnimation() {
42 var div = document.querySelector(
"div");
43 div.className =
"animate";
49 <p>Testing setting an animation while a transition is running, in the
50 case where the animation synthesizes the initial keyframe
</p>
52 Start the transition, then start the animation.
</p>
54 <a href=
"https://bugs.webkit.org/show_bug.cgi?id=41188">https://bugs.webkit.org/show_bug.cgi?id=
41188</a>
56 <button onclick=
"doTransition();">Transition
</button>
57 <button onclick=
"doAnimation();">Set Animation
</button>