CSS动画延迟重复 [英] CSS animation delay in repeating

问题描述

我最近发现了如何正确使用CSS动画（以前我驳回他们无法像JavaScript一样复杂的序列）。所以现在我正在学习他们。

I've recently discovered how to "properly" use CSS animations (previously I dismissed them as not being able to make complex sequences like you could in JavaScript). So now I'm learning about them.

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

For this effect, I'm trying to have a gradient "flare" sweep across a progress bar-like element. Similar to the effect on native Windows Vista/7 progress bars.

@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秒，

As you can see, I am trying to have a delay of 4 seconds, followed by the shine sweeping across in 1 second, repeated.

然而，似乎 animation-delay 只有

我已经解决了这个问题，如下所示：

I "resolved" this issue as follows:

@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;
}

code> 80％是完全相同的，导致动画长度的80％的延迟。

from and 80% are exactly the same, resulting in a "delay" of 80% of the animation length.

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

This works, but for my next animation, I need the delay to be variable (constant for a particular element, but variable among elements that use the animation), while the animation itself stays exactly the same length.

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

With the above "solution", I would end up with a slower animation when all I want is a longer delay.

animation-delay 适用于所有迭代，而不仅仅是第一个？

Is it possible to have the animation-delay apply to all iterations, rather than just the first?

推荐答案

我有一个类似的问题，并使用

I had a similar problem and used

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

比特刺激你必须假装你的时间，在任一端。

Bit irritating that you have to fake your duration to account for 'delays' at either end.

这篇关于CSS动画延迟重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！