ManualTests/animate-left.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7     <title>Animation of left property</title>
   8     <style>
   9          div {
  10              position: relative;
  11              left: 100px;
  12              height: 200px;
  13              width: 200px;
  14              background-color: #9bb;
  15              -webkit-animation-name: bounce;
  16              -webkit-animation-duration: 2s;
  17              -webkit-animation-iteration-count: infinite;
  18              -webkit-animation-direction: alternate;
  19              -webkit-animation-timing-function: ease-in-out;
  20          }
  21
  22          @-webkit-keyframes bounce {
  23            from {
  24              left: 100px;
  25            }
  26            to {
  27              left: 300px;
  28            }
  29          }
  30
  31      </style>
  32 </head>
  33 <body>
  34   <h1>Animation of 'left' property</h1>
  35
  36   <p>The element below should bounce 200 pixels left and right continuously</p>
  37
  38   <div id="target">
  39     This element should animate.
  40   </div>
  41
  42 </body>
  43 </html>