ManualTests/transition-accelerated.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     .box {
   7       position: relative;
   8       height: 100px;
   9       width: 100px;
  10       margin: 10px;
  11       background-color: blue;
  12     }
  13
  14     .slow {
  15       -webkit-animation: slow 2s infinite linear alternate;
  16     }
  17
  18     .fast {
  19       -webkit-animation: fast 2s infinite linear alternate;
  20     }
  21
  22     @-webkit-keyframes slow {
  23       from {
  24         left: 0px;
  25       }
  26       to {
  27         left: 400px;
  28       }
  29     }
  30
  31     @-webkit-keyframes fast {
  32       from {
  33         -webkit-transform: translateX(0);
  34       }
  35       to {
  36         -webkit-transform: translateX(400px);
  37       }
  38     }
  39   </style>
  40 </head>
  41 <body>
  42   <p>The lower box should animate more smoothly than the upper one (on Mac).</p>
  43   <div class="box slow"></div>
  44   <div class="box fast"></div>
  45 </body>
  46 </html>