怎么用Javascript来控制CSS3的动画播放多次?

CSS3的animation动画如今在移动设备上兼容性已经很不错了,至少在主流android以及iPhone设备上工作都是良好的。我们经常会用-webkit-animation: right-in-move 2s linear来实现一段动画,里面通过animation-iteration-count可以设置连续播放的次数,注意是连续,假如我想一遍播放完停止,等到恰当的时机再用JS使其播放该怎么办呢?

怎么用Javascript来控制CSS3的动画播放多次?

试了如下几种方法都不行:

1. 设置animation-play-state为running,跑步起来。
2. 用jQuery将-webkit-animation设置为null依然不行。
3. 将对应的html元素先隐藏再显示还是不行。

最后用如下方法成功搞定: 1.把动画放到一个独立的class里面,比如.tv-play {-webkit-animation: right-in-move 2s linear} 2.$element.addClass("tv-play"); 3.移除播放的class: setTimeout($.proxy(function() { $element.removeClass("tv-play"); }, this), 1800); 注意必须setTimeout才可以,这里设置的时间要和动画播放的时间差不多。

相关阅读