javascript - 从停止的地方重新启动 CSS3 动画？

Question

我希望创建一个动画，每次单击按钮时，对象都会向右移动一定量。

例如，如果对象的初始位置是“left:10px”，并且每 1 个动画循环将其移动 10px，那么第一次单击后它应该是 20px，第二次单击后它应该是 30px，依此类推。

我应该怎么做呢？现在 CSS 动画似乎在每次点击时从对象的初始位置重新开始。

Answer 1

我认为这是不可能的，至少你不能这样做：

@-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.");
    });
});

现场演示：here

希望这会帮助你。

---

添加

所以动画部分需要使用 CSS3。您可以transition像这样在 CSS 中使用：

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

并使用JavaScript对其进行更改left（动画部分不涉及JavaScript）。

现场演示（新）：here

Answer 2

这是一个用 CSS 做动画的非 jQuery 版本。需要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;
}