gpt4 book ai didi

javascript - 每 3 秒重复一次动画

转载 作者:数据小太阳 更新时间:2023-10-29 04:58:58 28 4
gpt4 key购买 nike

我正在使用 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 中。

最佳答案

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

在下面的代码片段中,以下是正在执行的操作:

  • 整个动画持续时间为 6 秒。为了有延迟,整个持续时间应该是你的动画实际运行的持续时间+时间延迟。在这里,动画实际运行了 3 秒,我们需要延迟 3 秒,因此持续时间设置为 6 秒。
  • 对于动画的前 50%(即 3 秒),没有任何反应,元素基本上保持其位置。这给出了应用 3 秒延迟的外观
  • 对于接下来的 25% 的动画(即 1.5 秒),元素使用 transform: translateY(50px) 向下移动 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>

关于javascript - 每 3 秒重复一次动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32223835/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com