Délai de répétition de l'animation CSS

Question

J'ai récemment découvert comment utiliser "correctement" les animations CSS (auparavant, je les rejetais car elles ne permettaient pas de réaliser des séquences complexes comme en JavaScript). Je suis donc en train d'apprendre à les connaître.

Pour cet effet, j'essaie de faire en sorte qu'un gradient "flare" balaye un élément de type barre de progression. Cet effet est similaire à celui des barres de progression natives 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;
}

Comme vous pouvez le voir, j'essaie d'avoir un délai de 4 secondes, suivi par le balayage de la brillance en 1 seconde, répété.

Cependant, il semble que le animation-delay ne s'applique qu'à la première itération, après quoi l'éclat continue à se propager de manière répétée.

J'ai "résolu" ce problème comme suit :

@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 80% sont exactement les mêmes, ce qui entraîne un "retard" de 80% de la durée de l'animation.

Cela fonctionne, mais pour ma prochaine animation, j'ai besoin que le délai soit variable (constant pour un élément particulier, mais variable parmi les éléments qui utilisent l'animation), alors que l'animation elle-même reste exactement de la même longueur.

Avec la "solution" ci-dessus, je me retrouverais avec une animation plus lente alors que tout ce que je veux, c'est un délai plus long.

Est-il possible d'avoir le animation-delay s'applique à toutes les itérations, et pas seulement à la première ?

Answer 1

Je sais que c'est vieux mais je cherchais la réponse dans ce post et avec jquery vous pouvez le faire facilement et sans trop de tracas. Il suffit de déclarer votre animation keyframe dans le css et de définir la classe avec les attributs que vous souhaitez. Dans mon cas, j'ai utilisé l'animation tada de css animate :

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

Je voulais que l'animation se déroule toutes les 10 secondes, donc jquery ajoute simplement la classe, après 6000ms (suffisamment de temps pour que l'animation se termine), il retire la classe et 4 secondes plus tard, il ajoute à nouveau la classe et ainsi l'animation recommence.

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

Ce n'est pas du tout difficile, comme l'a dit un type.