WebCore/manual-tests/animation-with-transition.html
changeset 0 4f2f89ce4247
equal deleted inserted replaced
-1:000000000000 0:4f2f89ce4247
       
     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>