Retraso de animación CSS en repetición

Recientemente descubrí cómo “usar” correctamente las animaciones de CSS (anteriormente las descarté porque no eran capaces de hacer secuencias complejas como lo haría en JavaScript). Así que ahora estoy aprendiendo sobre ellos.

Para este efecto, estoy tratando de tener un barrido de “destello” de gradiente a través de un elemento similar a una barra de progreso. Similar al efecto en las barras de progreso nativas de 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; } 

Como puede ver, estoy tratando de tener un retraso de 4 segundos, seguido del brillo que se extiende en 1 segundo, repetido.

Sin embargo, parece que la animation-delay la animation-delay solo se aplica a la primera iteración, después de lo cual el brillo simplemente sigue barriéndose repetidamente.

“Resolví” este problema de la siguiente manera:

 @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 y el 80% son exactamente iguales, lo que resulta en un “retraso” del 80% de la duración de la animación.

Esto funciona, pero para mi próxima animación, necesito que el retraso sea variable (constante para un elemento en particular, pero variable entre los elementos que usan la animación), mientras que la animación misma permanece exactamente la misma longitud.

Con la “solución” anterior, terminaría con una animación más lenta cuando todo lo que quiero es un retraso más largo.

¿Es posible que el animation-delay la animation-delay aplique a todas las iteraciones, en lugar de solo a la primera?

Tuve un problema similar y utilicé

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

Es irritante que tengas que fingir tu duración para dar cuenta de los “retrasos” en cada extremo.

minitech está justo en esa animation-delay especifica el retraso antes de que comience la animación y NO el retraso entre las 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í que sugiere esta característica de retraso de iteración.

Si bien puede haber una solución alternativa en JS, puede simular este retraso de iteración para el destello de la barra de progreso utilizando solo CSS.

Al declarar la position:absolute div de flare position:absolute y el overflow: hidden div principal overflow: hidden , establecer el estado del fotogtwig 100% mayor que el ancho de la barra de progreso, y jugar con la función de temporización cúbica-bóveda y los valores de desplazamiento izquierdo, puede para emular una temporización linear o de ease-in-out con un “retraso”.

Sería interesante escribir una mezcla less / scss para calcular exactamente la función offset y de sincronización izquierda para obtener esto exactamente, pero no tengo tiempo en este momento para jugar con ella. ¡Me encantaría ver algo así!

Aquí hay una demostración que armé 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

  
/* 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; }

Esto es lo que deberías hacer. Debería funcionar porque tienes una animación de 1 segundo, luego una demora de 4 segundos entre iteraciones:

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

Así que he estado jugando con esto mucho y puedes hacerlo sin ser muy hacky. Esta es la forma más sencilla de poner un retraso entre las iteraciones de animación que es 1. SUPER FÁCIL y 2. simplemente requiere un poco de lógica. Mira esta animación de baile que hice:

 .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); } } 

De hecho vine aquí tratando de encontrar la manera de retrasar la animación, cuando me di cuenta de que solo 1. extendías la duración de la animación y la camisa la proporción de tiempo para cada animación. Beore los tuve cada uno durando .5 segundos por la duración total de 2.5 segundos. Ahora digamos que quería agregar un retraso igual a la duración total, por lo que un retraso de 2,5 segundos.

Tu tiempo de animación es de 2.5 segundos y el retraso es de 2.5, por lo que cambias la duración a 5 segundos. Sin embargo, debido a que duplicó la duración total, querrá reducir a la mitad la proporción de animaciones. Verifique el final a continuación. Esto funcionó perfectamente para mí.

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

En sum:

Estos son los cálculos que probablemente utilizaría para descubrir cómo cambiar la duración de la animación y el% de cada parte.

desired_duration = x

desired_duration = animation_part_duration1 + animation_part_duration2 + … (y así sucesivamente)

Deseos_delay = y

duración total = x + y

animation_part_duration1_actual = animation_part_duration1 * desired_duration / total_duration

Prefiero escribir un poco de JavaScript que hacer que el CSS sea menos manejable.

Primero, solo aplique la animación CSS en un cambio de atributo de datos:

 .progbar[data-animation="barshine"] { animation: barshine 1s linear; } 

A continuación, agregue javascript para alternar la animación a la mitad del retraso.

 var progbar = document.querySelector('.progbar'); var on = false; setInterval(function () { progbar.setAttribute('data-animation', (on) ? 'barshine' : ''); on = !on; }, 3000); 

O si no desea que la animación se ejecute cuando la pestaña está oculta:

 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(); 

Aquí hay un pequeño fragmento que muestra lo mismo el 75% del tiempo, luego se desliza. Este esquema de repetición emula el retraso muy bien:

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

El retraso solo es posible una vez al principio con infinito. en sort delay no funciona con infinito loop. para eso debes mantener el ejemplo de espacios en blanco de animación de fotogtwigs clave:

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

animará del 10% al 60% y esperará hasta completar un 40% más. Entonces el 40% viene en retraso.

encontrar ejemplo de violín

Hice un cartel en la pared que se mueve a izquierda y derecha con intervalos. Para mí funciona:

 .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); } }