CSS动画延迟重复

Question

我最近发现了如何“正确地”使用 CSS 动画(之前我认为它们不能像在 JavaScript 中那样制作复杂的序列)。所以现在我正在了解它们。

为了实现这种效果，我试图让渐变“耀斑”扫过类似进度条的元素。类似于原生 Windows Vista/7 进度条的效果。

@keyframes barshine {
  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%);}
  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%);}
}
.progbar {
  animation: barshine 1s 4s linear infinite;
}

如您所见，我尝试延迟 4 秒，然后在 1 秒内让闪光扫过，重复。

不过，animation-delay似乎只适用于第一次迭代，之后闪耀就一直重复扫过。

我“解决”了这个问题如下:

@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%);}
}
.progbar {
  animation: barshine 5s linear infinite;
}

from 和 80% 完全一样，导致“延迟”动画长度的 80%。

这可行，但对于我的下一个动画，我需要延迟是可变的(对于特定元素是常量，但在使用动画的元素之间是可变的)，而动画本身保持完全相同的长度。

使用上面的“解决方案”，当我想要的只是更长的延迟时，我最终会得到一个更慢的动画。

是否可以将 animation-delay 应用于所有迭代，而不仅仅是第一个迭代？

Answer 1

我遇到了类似的问题，用过

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

有点烦人的是你必须伪造你的持续时间来解释两端的“延迟”。