Question

这个问题是partly duplicated，但不完全。我知道如何为我自己的动画添加间隔，但现在我所谈论的动画来自animate.css。我想为它的动画添加间隔，比如摇动。怎么样？

Answer 1

   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;

Answer 2

尝试使用javascript来实现这一目标。

使用 -

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

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

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

希望这会有所帮助。

Answer 3

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

如何在animate.css中编码的css动画周期之间添加间隔？

3 个答案: