循环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的解决方案应该更接近您的要求,但我将提供使用CSS3动画的解决方案,而不是使用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");
});

小提琴

我没有使用上面的可选animation-delay参数,其余的应该非常简单.infinite带alternate方向的迭代计数将无限期地执行动画,从(from到to)到(to到from)交替动画方向,直到您调用$msg.css("animation", "")删除动画.

PS.jQuery 1.8+会自动为你做JS中的前缀.
当然,你仍然必须在CSS前面加上非webkit浏览器的工作.前缀应该这样做.

摆弄前缀CSS.