ManualTests/animation-with-transition.html

   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>