Перезапустить анимацию CSS3 с того места, где она остановилась? - PullRequest
Новая
       27

Перезапустить анимацию CSS3 с того места, где она остановилась?

3 голосов
/ 01 января 2012

Я хочу создать анимацию, в которой при каждом нажатии кнопки объект перемещается на определенную величину вправо.

Например, если начальная позиция объекта была, скажем, «left: 10px», и каждый 1 цикл анимации перемещал его, скажем, на 10px, то после первого щелчка он должен быть в 20px, после второго щелчка он должен быть в30px и т. Д.

Как мне это сделать?В данный момент CSS-анимация, похоже, перезапускается с начальной позиции объекта при каждом нажатии.

Ответы [ 2 ]

2 голосов
/ 01 января 2012

Я не думаю, что это возможно, по крайней мере, вы не можете сделать что-то вроде этого: 

@-webkit-keyframes move{
  0% {}
100% {
     -webkit-transform: translate(10px);
     }  
}

   This will not work at all.

Однако вы можете использовать jQuery .С его помощью можно легко создавать анимации, используя очень мало строк : 

$('#button').click(function() {
    $('#book').animate({
        left: '+=10'
    }, 1000, function() {
        console.log("Done.");
    });
});

Live Demo: here

Надеюсь, это вам поможет.

ДОБАВЛЕНО

Так что вам нужно использовать CSS3 для анимации.Вы можете использовать transition в CSS следующим образом: 

-webkit-transition:left .3s ease-in-out;

и использовать JavaScript для изменения left (JavaScript не участвует в анимации).

Live Demo (новый) : here

1 голос
/ 02 января 2012

Вот не-jQuery-версия с CSS для анимации. Javascript необходим для установки left, а затем transition: left управляет анимацией.

Демо: http://jsfiddle.net/ThinkingStiff/UEt4Y/

Сценарий: 

document.getElementById( 'move-me' ).addEventListener( 'click', function () {

    var move = document.getElementById( 'move' );
    move.style.left = ( move.offsetLeft + 10 ) + 'px';

}, false );

HTML: 

<button id="move-me">Move</button>
<div id="move"></div>

CSS: 

#move {
    background: green;
    height: 50px;
    left: 0px;
    position: absolute;
    top: 100px;
    transition:             left 250ms ease-in-out;
        -moz-transition:    left 250ms ease-in-out;
        -ms-transition:     left 250ms ease-in-out;
        -o-transition:      left 250ms ease-in-out;
        -webkit-transition: left 250ms ease-in-out;
    width: 50px;
}
...