CSS3非线性动画路径 [英] CSS3 non-linear Animation paths

问题描述

你是怎么做到用CSS3非线性动画？

how do you do non-linear animation with css3?

基本上，如果我需要带一箱脱离出来查看端口，它的一个直降道路，那么它很容易用下面的code ++做的：

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

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

但是，当元素被旋转会发生什么？ 25度说呢？然后为动画看起来有些不自然，这将需要在25度偏移线的进步，而不能仅仅是自上而下的，或左右的动画...

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...

我希望我做感在这里...看看这里的演示 http://jsfiddle.net / YMHT4 / 8 /

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

如果你改变了x和y translate3d（X，Y，Z），那么这两个方面将动画，你会得到一个对角线路径动画。

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

这篇关于CSS3非线性动画路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！