每3秒重复一次动画

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

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

• 动画的整个持续时间为6秒。为了产生延迟，整个持续时间应为动画实际运行的持续时间+时间延迟。在这里，动画实际上运行了3秒，我们需要3秒的延迟，因此持续时间设置为6秒。
• 对于动画的前50％（即3秒），什么也没有发生，并且元素基本上保持其位置。这给出了应用了3秒延迟的外观
• 在接下来的25％的动画中（即1.5秒），元素使用向下移动50px

  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>