title: Chain webkit animation
body: <p>I would like to create a 'chained' animation that moves a div element on the screen to two different points on the screen, in two consecutive steps.</p>
  
  <p>So if my div starts at (0,0), I would like this div to animate and move towards (100,100) in 2 seconds. After it reaches the latter destination, it then animates again and moves to point (200, 200) in 3 seconds.</p>
  
  <p>Using -webkit-animation I am able to make one translation or animation, but I cannot chain the second animation to start after the first has finished - because I do not have a handle provided to be (an event, or a css class) that can give me such information.</p>
  
  <p>I am happy to use a bit of javascript magic as part of the solution.</p>
  
  <p>Here is some code to visualise what I am trying to do:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      position: relative;
  }
  
  #box {
      width: 64px;
      height: 64px;
      position: absolute;
      text-indent: -9999px;
  }
  
  .translate1 {
      -webkit-transform: translate(100px, 100px);
      -webkit-transition: all 2s ease-in;
  }
  
  .translate2 {
      -webkit-transform: translate(100px, 100px);
      -webkit-transition: all 23 ease-in;
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$('#box').click(function(){ $(this).addClass('translate1') });
  </code></pre>
  
  <p>Edit: I am after a solution that uses -webkit-animation because it is currently the best way to display smooth native-like animation in osx</p>