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反而。您可以使用 very few lines 轻松创建动画:

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

现场演示: here

希望这对您有所帮助。

---

已添加

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

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

并使用 JavaScript 更改其左侧(JavaScript 不参与动画部分)。

现场演示(新): here