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

J'ai fait un poster sur le mur qui bouge de gauche à droite avec des intervalles. Pour moi, ça marche :

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

Answer 2

Voici un petit extrait qui montre la même chose pendant 75% du temps, puis ça glisse. Ce schéma de répétition émule joliment le délai :

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

Answer 3

Vous pouvez créer un "faux" délai entre des animations infinies uniquement avec les CSS. Pour ce faire, il faut définir intelligemment les points d'animation des images clés et la vitesse de la durée de l'animation.

Par exemple, si nous voulons animer une balle qui rebondit, et que nous voulons un bon délai de 0,5s à 1s entre chaque rebond, nous pouvons faire quelque chose comme ça :

@keyframes bounce{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(25%);
    }
    75%{
        transform: translateY(15%);
    }
    90%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(0);
    }
}

Ce que nous faisons, c'est nous assurer que la balle retourne à sa position initiale beaucoup plus tôt que 100%. Dans mon exemple, je le fais à 90%, ce qui me donne un délai d'environ 0,1s, ce qui me convient. Mais évidemment, dans votre cas, vous pouvez ajouter plus de points d'image clés et modifier les valeurs de transformation.

En outre, vous pouvez ajouter une durée d'animation supplémentaire pour équilibrer vos animations d'images clés.

Par exemple :

 animation: bounce .5s ease-in-out infinite;

Supposons que nous voulions que l'animation complète se termine en 0,5 s, mais que nous voulions un délai supplémentaire de 0,2 s entre les animations.

 animation: bounce .7s ease-in-out infinite;

Nous allons donc ajouter un délai supplémentaire de 0,2s, et dans nos animations d'images clés, nous pouvons ajouter des points de pourcentage supplémentaires pour combler les lacunes du délai de 0,2s.

Answer 4

Pour un flash frontalier : en fait, c'est très simple : remplacez de à à 99% de noir et par exemple 1% le passage au bleu vous pouvez même le rendre plus court, en réglant le temps d'animation à 5 secondes par exemple.

@keyframes myborder {
  0% {border-color: black;}
  99% {border-color:black;}
  100% {border-color: blue;}
 }

Answer 5

Le délai n'est possible qu'une seule fois au début avec l'infini. En fait, le délai ne fonctionne pas avec une boucle infinie. Pour cela, vous devez garder les images clés de l'animation en blanc, par exemple :

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

il animera de 10% à 60% et attendra de compléter 40% de plus. Donc, 40% vient en retard.

trouver un exemple de violon