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.

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.

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.

I am happy to use a bit of javascript magic as part of the solution.

Here is some code to visualise what I am trying to do:

HTML:

```
<div id="box"></div>

```

CSS:

```
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;
}

```

Javascript

```
$('#box').click(function(){ $(this).addClass('translate1') });

```

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