我最近发现了如何“正确”使用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适用于所有迭代，而不仅仅是第一次迭代？
答案 0 :(得分：49)
我遇到了类似的问题并使用了
@-webkit-keyframes pan {
0%, 10% { -webkit-transform: translate3d( 0%, 0px, 0px); }
90%, 100% { -webkit-transform: translate3d(-50%, 0px, 0px); }
}
有点恼火，你必须伪造你的持续时间来解释任何一方的'延迟'。
答案 1 :(得分：17)
minitech是正确的，animation-delay指定动画开始前的延迟， NOT 迭代之间的延迟。 The editors draft of the spec对此进行了详细描述，并且对您正在描述的此功能进行了讨论，here表明了此迭代延迟功能。
虽然JS中可能存在一种解决方法，但您可以仅使用CSS伪造进度条光晕的迭代延迟。
通过声明flare div position:absolute和父div overflow: hidden，将100％关键帧状态设置为大于进度条的宽度，并设置playing around with the cubic-bezier timing function和左偏移值，能够以“延迟”模拟ease-in-out或linear时间。
编写一个less / scss mixin来计算精确的左偏移量和定时函数以获得这个确切的结果会很有趣，但我现在还没有时间来摆弄它。很想看到类似的东西！
这是一个演示，我把它拼凑起来展示这个。 （我试图模仿Windows 7进度条并且有点短暂，但它演示了我正在谈论的内容）
演示： http://codepen.io/timothyasp/full/HlzGu
<!-- HTML -->
<div class="bar">
<div class="progress">
<div class="flare"></div>
</div>
</div>
/* CSS */
@keyframes progress {
from {
width: 0px;
}
to {
width: 600px;
}
}
@keyframes barshine {
0% {
left: -100px;
}
100% {
left: 1000px;
}
}
.flare {
animation-name: barshine;
animation-duration: 3s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(.14, .75, .2, 1.01);
animation-iteration-count: infinite;
left: 0;
top: 0;
height: 40px;
width: 100px;
position: absolute;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%, rgba(255,255,255,0) 87%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)), color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
z-index: 10;
}
.progress {
animation-name: progress;
animation-duration: 10s;
animation-delay: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
overflow: hidden;
position:relative;
z-index: 1;
height: 100%;
width: 100%;
border-right: 1px solid #0f9116;
background: #caf7ce; /* Old browsers */
background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#caf7ce), color-stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* IE10+ */
background: linear-gradient(to bottom, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#caf7ce', endColorstr='#2ab22a',GradientType=0 ); /* IE6-9 */
}
.progress:after {
content: "";
width: 100%;
height: 29px;
right: 0;
bottom: 0;
position: absolute;
z-index: 3;
background: -moz-linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00caf7ce', endColorstr='#2ab22a',GradientType=1 ); /* IE6-9 */
}
.bar {
margin-top: 30px;
height: 40px;
width: 600px;
position: relative;
border: 1px solid #777;
border-radius: 3px;
}
答案 2 :(得分：8)
这是你应该做的。它的工作原理是您有1秒的动画，然后迭代之间有4秒的延迟：
@keyframes barshine {
0% {
background-image:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);
}
20% {
background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);
}
}
.progbar {
animation: barshine 5s 0s linear infinite;
}
所以我一直在搞乱这个问题，你可以做到这一点，而不是非常hacky。这是在动画迭代之间设置延迟的最简单方法，即1.超级简单和2.只需要一些逻辑。看看我制作的这个舞蹈动画：
.dance{
animation-name: dance;
-webkit-animation-name: dance;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
}
@keyframes dance {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
transform: rotate(-120deg);
}
50% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes dance {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
20% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
40% {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
transform: rotate(-120deg);
}
60% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
80% {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
transform: rotate(-120deg);
}
95% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
}
我实际上来到这里试图弄清楚如何在动画中延迟，当我意识到你只是1.延长动画的持续时间和衬衫每个动画的时间比例。 Beore我让他们每人持续0.5秒，总持续时间为2.5秒。现在假设我想添加一个等于总持续时间的延迟，因此延迟时间为2.5秒。
您的动画时间是2.5秒，延迟是2.5，因此您将持续时间更改为5秒。但是，因为您将总持续时间加倍，所以您需要将动画比例减半。检查下面的决赛。这对我很有用。
@-webkit-keyframes dance {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
10% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
20% {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
transform: rotate(-120deg);
}
30% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
transform: rotate(-120deg);
}
50% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
总之：
这些是您可能用来计算如何更改动画持续时间和每个部分的百分比的计算。
desired_duration = x
desired_duration = animation_part_duration1 + animation_part_duration2 + ...（依此类推）
desired_delay = y
总持续时间= x + y
animation_part_duration1_actual = animation_part_duration1 * desired_duration / total_duration
答案 3 :(得分：5)
我宁愿写一些JavaScript，也不愿使CSS不易管理。
首先，仅对数据属性更改应用CSS动画：
.progbar[data-animation="barshine"] {
animation: barshine 1s linear;
}
然后添加javascript以在延迟量的一半处切换动画。
var progbar = document.querySelector('.progbar');
var on = false;
setInterval(function () {
progbar.setAttribute('data-animation', (on) ? 'barshine' : '');
on = !on;
}, 3000);
或者，如果您不想在隐藏选项卡时运行动画：
var progbar = document.querySelector('.progbar');
var on = false;
var update = function () {
progbar.setAttribute('data-animation', (on) ? 'barshine' : '');
on = !on;
setTimer();
};
var setTimer = function () {
setTimeout(function () {
requestAnimationFrame(update);
}, 3000);
};
setTimer();
答案 4 :(得分：2)
这是一个小片段，在75％的时间内显示相同的内容，然后它会滑动。这个重复模式可以很好地模拟延迟：
@-webkit-keyframes slide {
0% {background-position: 0 0;}
25% {background-position: 0 0;}
50% {background-position: 0 0;}
75% {background-position: 0 0;}
100% {background-position: 13em 0;}
}
@-moz-keyframes slide {
0% {background-position: 0 0;}
25% {background-position: 0 0;}
50% {background-position: 0 0;}
75% {background-position: 0 0;}
100% {background-position: 13em 0;}
}
@keyframes slide {
0% {background-position: 0 0;}
25% {background-position: 0 0;}
50% {background-position: 0 0;}
75% {background-position: 0 0;}
100% {background-position: 13em 0;}
}
答案 5 :(得分：2)
我在墙上做了一张海报，每隔一段时间左右移动。对我来说它有效：
.div-animation {
-webkit-animation: bounce 2000ms ease-out;
-moz-animation: bounce 2000ms ease-out;
-o-animation: bounce 2000ms ease-out;
animation: bounce 2000ms ease-out infinite;
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 2s;
transform-origin: 55% 10%;
}
@-webkit-keyframes bounce {
0% {
transform: rotate(0deg);
}
3% {
transform: rotate(1deg);
}
6% {
transform: rotate(2deg);
}
9% {
transform: rotate(3deg);
}
12% {
transform: rotate(2deg);
}
15% {
transform: rotate(1deg);
}
18% {
transform: rotate(0deg);
}
21% {
transform: rotate(-1deg);
}
24% {
transform: rotate(-2deg);
}
27% {
transform: rotate(-3deg);
}
30% {
transform: rotate(-2deg);
}
33% {
transform: rotate(-1deg);
}
36% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
答案 6 :(得分：1)
可以在动画之间实现暂停的另一种方法是应用第二个动画，该动画将元素隐藏所需的延迟量。这样做的好处是可以像平常一样使用CSS缓动功能。
.star {
animation: shooting-star 1000ms ease-in-out infinite,
delay-animation 2000ms linear infinite;
}
@keyframes shooting-star {
0% {
transform: translate(0, 0) rotate(45deg);
}
100% {
transform: translate(300px, 300px) rotate(45deg);
}
}
@keyframes delay-animation {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
50.01% {
opacity: 0;
}
100% {
opacity: 0;
}
}
仅当您希望延迟为动画持续时间的倍数时，此选项才有效。我用它使流星雨看起来更加随机： https://codepen.io/ericdjohnson/pen/GRpOgVO
答案 7 :(得分：0)
延迟只能在开始时使用无限延迟一次。 排序延迟不适用于无限循环。 为此你必须保持关键帧动画空白的例子：
@-webkit-keyframes barshine {
10% {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
}
60% {background: -webkit-linear-gradient(top, #7db9e8 0%,#d32a2d 100%);}
}
它将动画10％到60％并等待完成40％以上。所以有40％的人迟到了。
答案 8 :(得分：0)
我知道这很老了，但我一直在寻找这篇文章的答案，有了jquery，您就可以轻松地做到这一点，而无需太多麻烦。只需在CSS中声明动画关键帧，然后为类设置所需的属性即可。我的情况是使用css动画中的tada动画：
.tada {
-webkit-animation-name: tada;
animation-name: tada;
-webkit-animation-duration: 1.25s;
animation-duration: 1.25s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
我希望动画每10秒运行一次，因此jquery仅添加了该类，在6000毫秒（动画完成足够的时间）之后，它删除了该类，并在4秒钟后再次添加了该类，因此动画再次开始。
$(document).ready(function() {
setInterval(function() {
$(".bottom h2").addClass("tada");//adds the class
setTimeout(function() {//waits 6 seconds to remove the class
$(".bottom h2").removeClass("tada");
}, 6000);
}, 10000)//repeats the process every 10 seconds
});
根本不像一个人那样困难。
答案 9 :(得分：0)
您完全可以使用CSS在无限动画之间创建“伪”延迟。做到这一点的方法是巧妙地定义关键帧动画点和动画持续时间。
例如，如果我们想为一个弹跳球设置动画，并且希望每次弹跳之间有0.5s到1s的良好延迟，我们可以执行以下操作：
@keyframes bounce{
0%{
transform: translateY(0);
}
50%{
transform: translateY(25%);
}
75%{
transform: translateY(15%);
}
90%{
transform: translateY(0%);
}
100%{
transform: translateY(0);
}
}
我们要做的是确保球早于100％返回其原始位置。在我的示例中，我正在执行90％的操作，这给了我约0.1秒的延迟，这对我来说已经足够了。但是显然对于您的情况，您可以添加更多关键帧点并更改变换值。
此外，您可以添加其他动画持续时间以平衡关键帧动画。
例如：
animation: bounce .5s ease-in-out infinite;
让我们说我们希望完整的动画以.5s结尾，但是我们希望动画之间的附加延迟为.2s。
animation: bounce .7s ease-in-out infinite;
因此，我们将添加一个额外的.2s延迟，并且在关键帧动画中，我们可以添加更多的百分比来填补.2s延迟的空白。
答案 10 :(得分：0)
对于边框闪光灯： 实际上非常简单：将替换为到99％的黑色，例如将1％转换为蓝色 您甚至可以缩短动画时间，例如将其设置为5秒。
@keyframes myborder {
0% {border-color: black;}
99% {border-color:black;}
100% {border-color: blue;}
}