javascript - 循环 CSS 动画

Question

所以我这里有这个漂亮的 CSS 动画，我希望它循环播放。

遗憾的是，我几乎没有使用 CSS 动画的经验，也不知道该怎么做。如果这里有人可以帮助我，我将不胜感激。谢谢!

HTML

<div id="msg">Weeeeeee</div>

Javascript

$("#msg").click(function() {
    var duration = 1400;
    $msg = $(this);
    $msg.css("-webkit-transform", "scale(2)")
        .css("-webkit-transition-timing-function", "ease-out")
        .css("-webkit-transition-duration", duration + "ms");
    setTimeout(function () {
        $msg.css("-webkit-transform", "scale(1)")
            .css("-webkit-transition-timing-function", "ease-in")
            .css("-webkit-transition-duration", duration + "ms");
    }, duration);
});

CSS

#msg { font-size: 40pt; font-weight:bold; text-align:center; line-height: 120pt; }

Answer 1

Praveen 的解决方案应该更接近您的要求，但我会提供一个解决方案using CSS3 animations而不是使用 jQuery 来制作动画过渡。 IMO 更易于维护和理解:

CSS

@-webkit-keyframes foo {
  from {
    -webkit-transform:scale(1);
  }
  to {
    -webkit-transform:scale(2);
  }
}

然后是 JS:

$("#msg").click(function() {
    var duration = 1400;
    $msg = $(this);
    //syntax is: animation-name animation-duration[ animation-timing-function][ animation-delay][ animation-iteration-count][ animation-direction]
    $msg.css("animation", "foo " + duration + "ms ease infinite alternate");
});

Fiddle

我没有在上面使用可选的 animation-delay 参数，其余的应该很简单。 infinite iteration count with alternate direction 将无限期地执行动画，交替动画方向从 (from 到 to ) 到(to to from) 直到你调用 $msg.css("animation", "") 移除动画。

附言。 jQuery 1.8+ 将自动为您在 JS 中添加前缀。
当然，您仍然需要为 CSS 添加前缀才能在非 webkit 浏览器中工作。 Prefixr应该这样做。

Fiddle带前缀的 CSS。