循环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方向的alternate迭代计数将无限期地执行动画，从（from到to）到（to到from的动画方向交替）直到你拨打$msg.css("animation", "")来删除动画。

PS。 jQuery 1.8+将自动为你做前缀.J 当然，你仍然必须在CSS前面加上非webkit浏览器的工作。 Prefixr应该这样做。

带有前缀CSS的

Fiddle。

Answer 2

封装setInterval()

内的所有内容

var duration = 1400;
$msg = $(this);
setInterval(function(){
    $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);
}, duration);

这有帮助吗？是的，如果我错了，请纠正我......

Answer 3

您可以使用类来触发无限动画。 这可以通过添加一个类来实现。

$('#msg').click(function(){
  $(this).addClass('loading');
  setTimeout(function(){
      $('#msg').removeClass('loading');
  },2000);
})

#msg{font-size:30px;}
#msg.loading{ animation:1s showborder linear infinite}

@keyframes showborder{
from{border: 5px solid red}
to{border: 5px solid green}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="msg">Weeeeeee CLICK ME</div>

您可以阅读有关 css scroll animation 的更多信息，它基本上使用类添加方法添加动画。