css怎么让动画下过一直重复,CSS动画延迟重复

我最近发现了如何“正确”使用CSS动画(以前我驳回他们不能像JavaScript中那样复杂的序列)。所以现在我正在学习他们。

为了这个效果，我试图有一个渐变“flare”扫过一个进度条状元素。类似于对本机Windows Vista / 7进度条的影响。

@keyframes barshine {

from {background-image:linear-gradient(120deg,rgba(255,255,0) -10%,0.25) -5%,0) 0%);}

to {background-image:linear-gradient(120deg,0) 100%,0.25) 105%,0) 110%);}

}

.progbar {

animation: barshine 1s 4s linear infinite;

}

正如你可以看到，我试图有一个4秒的延迟，其次是闪耀在1秒内扫过，重复。

然而，看起来动画延迟只适用于第一次迭代，之后闪耀只是保持重复扫过。

我“解决”这个问题如下：

@keyframes expbarshine {

from {background-image:linear-gradient(120deg,0) 0%);}

80% {background-image:linear-gradient(120deg,0) 110%);}

}

.progbar {

animation: barshine 5s linear infinite;

}

从和80％完全相同，导致动画长度的80％的“延迟”。

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

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

是否有可能将动画延迟应用于所有迭代，而不仅仅是第一个？