minitech tiene razón en eso animation-delayespecifica el retraso antes de que comience la animación y NO el retraso entre iteraciones. El borrador de la especificación de los editores lo describe bien y hubo una discusión sobre esta característica que está describiendo aquí, lo que sugiere esta característica de retraso de iteración.
Si bien puede haber una solución en JS, puede simular este retraso de iteración para el destello de la barra de progreso utilizando solo CSS.
Al declarar el div flare position:absolutey el div principal overflow: hidden, establecer el 100% del estado del fotograma clave mayor que el ancho de la barra de progreso y jugar con la función de tiempo cúbico-bezier y los valores de desplazamiento izquierdo, puede emular un tiempo ease-in-outo linearcon un retraso".
Sería interesante escribir un mixin less / scss para calcular exactamente el desplazamiento izquierdo y la función de sincronización para obtener esto exactamente, pero no tengo tiempo en este momento para jugar con él. ¡Me encantaría ver algo así!
Aquí hay una demostración que hice para mostrar esto. (Traté de emular la barra de progreso de Windows 7 y me quedé un poco corto, pero demuestra de lo que estoy hablando)
Demostración:
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-delayes el retraso antes de que comience la animación, y no hay otra propiedad como esta. Hay una mala solución con JavaScript que probablemente preferiría no usar :)