如何添加在animate.css中编码的css动画循环之间的间隔

How to add interval between cycles of css animation which is coded in animate.css?

本文关键字：css 动画 何添加 循环 之间 编码 添加 animate      更新时间：2023-09-26

这个问题有部分重复，但不是完全重复。我知道如何在我自己的动画中添加间隔，但现在我谈论的动画来自animate.css。我想在它的动画中增加间隔，比如说，shake。怎样

尝试使用javascript来实现这一点。

使用-

    $(".ani").delay(700).each(function(index) {
        $(this).delay(700*index).fadeIn(500);
    });

将class="ani"添加到需要延迟的元素中，并使用计时（以毫秒为单位）来实现延迟和触发计时。

使用animation-iteration-count: x;可以控制动画的触发次数。

希望这能有所帮助。

   h1 {
  animation-duration: 3s;
  animation-name: shake;
  animation-iteration-count: infinite;
animation-delay: 3s;
}
@keyframes shake{
  from {
    margin-left: 100%;
    width: 300%; 
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

检查此链接https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

我希望这对你有用

动画在3秒后继续执行，因为我们定义了animation-duration: 3s;以及为什么动画在一次之后继续执行，因为我们定义了animation-iteration-count: infinite;

只需给它一个id并应用css。#animationID { animation-duration: 2s; }

相关文章：