Chain webkit animation

Question

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

Answer 1

I use jQuery and Modernizr, then a function like this:

speed = 500;

var vP = "";
var transitionEnd = "transitionEnd";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
    transitionEnd = "msTransitionEnd";  
} else if ($.browser.mozilla) {
    vP = "-moz-";
    transitionEnd = "transitionend";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "oTransitionEnd";
}   

function animate(object, cssProperties, callback, ms) {
    if (!ms) {
        ms = speed;
    }

    if (Modernizr.csstransitions) {
        object.css(vP+"transition", "all "+ms+"ms ease-in-out");

        object.css(cssProperties);

        if ($.isFunction(callback)) {

            object.bind(transitionEnd,function(){
                object.unbind(transitionEnd);
                callback();
            });

        }

    } else {
        if ($.isFunction(callback)) {       
            object.animate(cssProperties, ms, callback);
        } else {
            object.animate(cssProperties, ms);          
        }
    }
}

Then call it like this: animate($("#someID"),{"left":"100px"});

Have a look at http://css3.bradshawenterprises.com/legacy/ for a little more detail.

Answer 2

The most simple way to achieve this would be...

$('#box').click(function(){ 
  $(this).addClass('translate1').bind("webkitTransitionEnd", function() {
      $(this).addClass('translate2')
    })
});

http://jsfiddle.net/ALhym/

There are some problems with your example code, I guess the real version doesn't have them, but translate2 has the same properties as translate1, and -webkit-transition: all 23 ease-in; is missing the unit on the duration, which is required.