Comment appliquer un délai d'animation CSS à toutes les itérations ?

Délai d'animation CSS : application à toutes les itérations

Lors de l'utilisation d'animations CSS avec un délai, vous pouvez rencontrer un problème où le délai est uniquement appliqué à la première itération, provoquant la répétition continue de l'animation sans l'intervalle souhaité.

Pour résoudre ce problème, vous pouvez utiliser un autre approche :

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

Ici, l'image clé de 80 % est identique à l'image clé de départ, créant effectivement un "retard" de 80 % de la durée totale de l'animation.

Comme suggéré par un expérimenté utilisateur, vous pouvez également utiliser l'approche suivante :

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

Cette méthode consiste à créer une fausse durée pour s'adapter aux "retards" aux deux extrémités du animation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!