minitech ist richtig, da es animation-delaydie Verzögerung vor dem Start der Animation und NICHT die Verzögerung zwischen den Iterationen angibt . Der Redaktionsentwurf der Spezifikation beschreibt sie gut und es gab eine Diskussion über diese Funktion, die Sie hier beschreiben , was auf diese Iterationsverzögerungsfunktion hindeutet.
Während es in JS möglicherweise eine Problemumgehung gibt, können Sie diese Iterationsverzögerung für das Fortschrittsbalken-Flare nur mit CSS vortäuschen.
Indem Sie das Flare-Div position:absoluteund das übergeordnete Div deklarieren, den overflow: hiddenKeyframe-Status von 100% größer als die Breite des Fortschrittsbalkens festlegen und mit der Timing-Funktion für kubische Bezier und den Werten für den linken Versatz herumspielen , können Sie ein ease-in-outoder linearTiming mit emulieren eine Verzögerung".
Es wäre interessant, ein less / scss-Mixin zu schreiben, um genau den linken Offset und die Timing-Funktion zu berechnen, um genau das zu erhalten, aber ich habe im Moment nicht die Zeit, damit herumzuspielen. Würde aber gerne so etwas sehen!
Hier ist eine Demo, die ich zusammengestellt habe, um dies zu demonstrieren. (Ich habe versucht, den Windows 7-Fortschrittsbalken zu emulieren und bin etwas zu kurz gekommen, aber es zeigt, wovon ich spreche.)
Demo:
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
background:
background: -moz-linear-gradient(top,
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
background: -webkit-linear-gradient(top,
background: -o-linear-gradient(top,
background: -ms-linear-gradient(top,
background: linear-gradient(to bottom,
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
border-radius: 3px;
}
animation-delayist die Verzögerung vor dem Start der Animation, und es gibt keine vergleichbare Eigenschaft. Es gibt eine schlechte Problemumgehung mit JavaScript, die Sie wahrscheinlich lieber nicht verwenden würden :)