6

所以我在这里有这个漂亮的 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; }
4

3 回答 3

11

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将无限期地执行动画，动画方向从 ( fromto to) 到 ( toto from) 直到您调用$msg.css("animation", "")删除动画。

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

摆弄带前缀的 CSS。

于 2013-01-13T19:19:42.433 回答
0

将所有内容封装在里面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);

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

于 2013-01-13T19:16:34.963 回答
0

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

$('#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 滚动动画的信息，它基本上使用类添加方法添加动画。

于 2021-02-17T11:42:06.377 回答