CSS3 non-linear Animation paths

how do you do non-linear animation with css3?

Basically, if I need to bring a box in from out of the view port, and its a straight down path, then its easy enough to do with the following code:

*{
    transition: transform 0.5s ease-in;
}

-- A开发者_C百科nd some JS to trigger the animation with a transform: translate3d(0,300px,0);

But what happens when the element is rotated? Say by 25 deg? Then for the animation to look somewhat natural, it'll need to progress in a 25 deg offset line, and cannot just be top-down, or left-right animations...

I hope I'm making sense here... Look at the demo here http://jsfiddle.net/YMHT4/8/

I'm trying to get the blue box to animate in on a slanted path...

I'm not sure if I'm understanding correctly, but if you're trying to do what I'm thinking, then the answer is quite simple:

function ani()
{
    if (!state)
    {
        $('#otherbox').css('-webkit-transform', 'translate3d(100px,150px,0) rotate(25deg)');
        state=true;
    }
    else
    {
        $('#otherbox').css('-webkit-transform', 'translate3d(0,0,0) rotate(25deg)');
        state=false;
    }
}

If you change both x and y in translate3d(x,y,z), then both dimensions will animate, and you will get a diagonal path animation.

http://jsfiddle.net/YMHT4/17