CSS3 非线性动画路径

Question

你如何用 css3 做非线性​​动画？

基本上，如果我需要从视口中取出一个盒子，并且它是一条直线向下的路径，那么使用以下代码就可以轻松完成：

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

-- And some JS to trigger the animation with a transform: translate3d(0,300px,0);

但是当元素旋转时会发生什么？说25度？那么为了让动画看起来有点自然，它需要在 25 度偏移线上进行，不能只是自上而下或左右动画......

我希望我在这里说得通...看看这里的演示 http://jsfiddle.net/YMHT4/8/

我正在尝试让蓝色框在倾斜的路径上动画...

Answer 1

我不确定我的理解是否正确，但是如果您尝试按照我的想法做，那么答案很简单：

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

如果您在 translate3d(x,y,z) 中同时更改 x 和 y，则两个维度都会动画，您将获得对角线路径动画。

http://jsfiddle.net/YMHT4/17