相关疑难解决方法(0)

我最近发现了如何"正确"使用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适用于所有迭代,而不仅仅是第一次？