<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Bouncing Box example</title>
    <style type="text/css" media="screen">

      @-webkit-keyframes bounce {
       from {
         left: 0px;
       }
       to {
         left: 200px;
       }
      }

      div {
       -webkit-animation-name: bounce;
       -webkit-animation-duration: 4s;
       -webkit-animation-iteration-count: 10;
       -webkit-animation-direction: alternate;
        width: 40%;
        padding: 0.2em 1em;
        position: relative;
        left: 0px;
        background: #aaaaff;
      }
      
    </style>
  </head>
  <body>
    <h1>An example of a bouncing box</h1>
    
    <div>
      <p>
        It's just a jump to the left. And then a step to the right.
      </p>
    </div>
    
  </body>
</html>