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

CSS3非线性动画路径

1 个答案: