我最近发现了如何“正确”使用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％的“延迟”。
这个工作，但对于我的下一个动画，我需要的是可变的延迟(对于一个特定的元素是常量，但在使用动画的元素之间变化)，而动画本身保持完全相同的长度。
有了上面的“解决方案”，我最终会得到一个较慢的动画，当我想要的是一个更长的延迟。
是否有可能将动画延迟应用于所有迭代，而不仅仅是第一个？
解决方法
我有一个类似的问题，并使用
@-webkit-keyframes pan {
0%,10% { -webkit-transform: translate3d( 0%,0px,0px); }
90%,100% { -webkit-transform: translate3d(-50%,0px); }
}
比特刺激，你必须假造你的持续时间，以解释“延误”在任一端。
