如何将 CSS 动画延迟应用于所有迭代？-css教程-PHP中文网

如何将 CSS 动画延迟应用于所有迭代？

Susan Sarandon

发布： 2024-12-19 01:58:09

原创

851 人浏览过

How to Apply CSS Animation Delay to All Iterations?

CSS 动画延迟：应用于所有迭代

使用带有延迟的 CSS 动画时，您可能会遇到延迟仅存在的问题应用于第一次迭代，导致动画在没有所需间隔的情况下连续重复。

要解决此问题，您可以使用不同的方法方法：

@keyframes expbarshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}

登录后复制

这里，80% 的关键帧与 from 关键帧相同，有效地创建了整个动画长度 80% 的“延迟”。

根据经验丰富的建议用户，您还可以使用以下方法：

@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}

登录后复制

此方法涉及创建一个假持续时间以适应两个地方的“延迟”动画结束。

以上是如何将 CSS 动画延迟应用于所有迭代？的详细内容。更多信息请关注PHP中文网其他相关文章！