31

我有以下 HTML：

<div class="rotate"></div>​

以及以下 CSS：

@-webkit-keyframes rotate {
  to { 
    -webkit-transform: rotate(360deg);
  }
}
.rotate {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-animation-name:             rotate;
    -webkit-animation-duration:         5s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
}​

我想知道是否有办法（使用 JavaScript）来停止动画，但让它完成当前的迭代（最好通过更改一个或几个 CSS 属性）。我尝试设置-webkit-animation-name一个空白值，但这会导致元素以一种不和谐的方式跳回其原始位置。我也尝试过设置-webkit-animation-iteration-count，1但它做同样的事情。

4

2 回答 2

36

收到animationiteration事件后停止动画。像这样的东西（使用jQuery）：

CSS

@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
  }
}
.rotate {
    width: 100px;
    height: 100px;
    background: red;
}
.rotate.anim {
    -webkit-animation-name:             rotate;
    -webkit-animation-duration:         5s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
}

HTML

<div class="rotate anim">TEST</div>
<input id="stop" type="submit" value="stop it" />

JS (JQuery)

$("#stop").click(function() {
    $(".rotate").one('animationiteration webkitAnimationIteration', function() {
        $(this).removeClass("anim");
    });
});

小提琴：http: //jsfiddle.net/sSYYE/1/

请注意，我在.one这里使用（不是.on），以便处理程序只运行一次。这样，动画可以稍后重新启动。

于 2012-10-25T04:27:13.160 回答
1

您的意思是您希望动画在结束时停止在原处而不跳回其原始位置？

然后你想要：

动画从一个地方移动到另一个地方并让它停留在那里：animation-fill-mode:forwards;

检查此链接：

http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

于 2014-03-03T09:03:38.200 回答