每 3 秒重复一次动画

IT技术 javascript css css-animations wow.js
2021-03-10 08:18:18

我正在使用 WOW.js 和 animate.css，现在我正在将 CSS 运行到 Infinite。我想知道如何让我的课程停止运行 3 秒并重新开始到无限？

我的html：

<img src="images/fork.png" class="fork wow rubberBand"  >

我的 CSS 类：

.fork {
    position: absolute;
    top: 38%;
    left: 81%;
    max-width: 110px;
    -webkit-animation-iteration-count: infinite ;
    -webkit-animation-delay: 5s;

}

解决方案可以是 JS 或 CSS3。

2个回答

对于纯 CSS3 动画，在动画的每次迭代之间添加延迟的一种方法是修改关键帧设置，以便它们产生所需的延迟。

在下面的代码段中，正在执行以下操作：

  • 动画的整个持续时间为 6 秒。为了有延迟，整个持续时间应该是你的动画实际运行的持续时间+时间延迟。在这里，动画实际运行了 3 秒，我们需要 3 秒的延迟，因此持续时间设置为 6 秒。
  • 对于动画的前 50%（即 3 秒），没有任何react，元素基本上保持其位置。这给出了应用 3 秒延迟的外观
  • 对于接下来 25% 的动画（即 1.5 秒），元素使用transform: translateY(50px).
  • 对于动画的最后 25%（即最后 1.5 秒），元素使用transform: translate(0px)（回到其原始位置）向上移动 50px 。
  • 整个动画重复无数次，每次迭代都会有 3 秒的延迟。

div{
  height: 100px;
  width: 100px;
  border: 1px solid;
  animation: move 6s infinite forwards;
}
@keyframes move{
  0% { transform: translateY(0px);}
  50% { transform: translateY(0px);}
  75% { transform: translateY(50px);}
  100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>

该animation-delay属性只为第一次迭代引入延迟，因此它不能用于在每次迭代之间添加延迟。下面是一个示例片段，说明了这一点。

div{
  height: 100px;
  width: 100px;
  border: 1px solid;
  animation: move 6s infinite forwards;
  animation-delay: 3s;
}
@keyframes move{
  0% { transform: translateY(0px);}
  50% { transform: translateY(50px);}
  100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>

@ user964836：我不知道您是否链接了错误的小提琴，但您实际上并没有像回答中提到的那样插入虚拟帧（或）增加持续时间。
2021-04-23 08:18:18
@timo：forwards这个动画并不是真正需要的，但一般来说，它使动画元素保持其最后一个关键帧的状态（也就是说，如果您以 100% 从 0px 转换为 100px，则元素将保持平移 100px）。
2021-04-29 08:18:18
@user964836：很高兴知道它帮助了朋友 :) 顺便说一句，我将编辑问题以添加 css-animations 标签，因为这更适合这个问题（并将有助于未来的搜索）。希望你不介意我替换现有的标签之一。
2021-05-04 08:18:18
@ user964836：你有没有检查我刚刚给的小提琴。不要添加animation-delay，它不适用于您的情况。而是增加持续时间（从 1 秒到 4 秒）并添加虚拟关键帧（就像我对前 75% = 3 秒所做的那样）。
2021-05-08 08:18:18
延迟参数的值有什么作用forwards？
2021-05-12 08:18:18

像这样

html

<div class="halo halo-robford-animate"></div>

css

body{
  background: black;
}

.halo{
  width: 263px;
  height: 77px;
  background: url('http://i.imgur.com/3M05lmj.png');
}

.halo-robford-animate{
    animation: leaves 0.3s ease-in-out 3s infinite alternate;
    -webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
     -moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
    -o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}

@-webkit-keyframes leaves {
    0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes leaves {
    0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes leaves {
    0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes leaves {
   0% {
        opacity: 1;
    }

    50% {
      opacity: 0.5
    }

    100% {
        opacity: 1;
    }
}

提琴手

其它你可能感兴趣的问题
上一篇d3 力导向布局 - 链接距离优先 下一篇(A == B == C) 比较在 JavaScript 中是如何工作的？