如何在 CSS 动画迭代之间添加一致的延迟？

CSS 动画延迟：延长迭代之间的暂停

实现迭代之间具有一致延迟的重复动画，而不是仅适用于第一次迭代，请考虑以下方法：

1.调整动画持续时间：

一种解决方法是将所需的延迟合并到动画持续时间中。这涉及计算动画应该花费的实际持续时间（包括延迟），然后相应地设置animation-duration属性。例如：

@keyframes barshine {
  <!-- ...Animation definition here... -->
}
.progbar {
  animation: barshine 5s linear infinite;
  animation-delay: 1s;
}

在此示例中，动画的真实持续时间为 5 秒，并有 1 秒的延迟。

2.对延迟和效果使用单独的动画：

另一种方法是为延迟和实际效果创建单独的动画。此方法提供了更大的灵活性，可以独立于动画本身来控制延迟。实现此目的的方法如下：

@keyframes shine {
  <!-- ...Animation definition for the effect here... -->
}
@keyframes delay {
  from {opacity: 0;}
  to {opacity: 1;}
}
.progbar {
  animation: delay 4s, shine 1s infinite;
}

在这种情况下，“延迟”动画将在 4 秒内逐渐将不透明度从 0 增加到 1，从而创建淡入效果。然后，“闪耀”动画将无限期地运行，创建预期的扫描渐变。

3.使用供应商前缀：

在某些情况下，您可能会遇到“animation-delay”属性的浏览器兼容性问题。为了确保兼容性，建议在标准属性中包含供应商前缀，例如“-webkit-”或“-moz-”。例如：

@-webkit-keyframes barshine {
  <!-- ...Animation definition... -->
}
@-moz-keyframes barshine {
  <!-- ...Animation definition... -->
}

附加说明：

使用“@-webkit-keyframes”的答案中提供的代码适用于旧版本的 WebKit。通常不建议在现代开发中依赖供应商前缀，除非出于兼容性需要。

以上是如何在 CSS 动画迭代之间添加一致的延迟？的详细内容。更多信息请关注PHP中文网其他相关文章！