CSS3 нелинейных путей анимации - PullRequest
Новая
       6

CSS3 нелинейных путей анимации

4 голосов
/ 14 июля 2011

как вы делаете нелинейную анимацию с 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/

Я пытаюсь заставить синюю коробку оживить наклонный путь ...

1 Ответ

3 голосов
/ 14 июля 2011

Я не уверен, правильно ли я понимаю, но если вы пытаетесь сделать то, что я думаю, тогда ответ довольно прост: 

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), тогда оба измерения будут анимированы, и вы получите анимацию диагонального пути.

http://jsfiddle.net/YMHT4/17

...