Comment puis-je arrêter une animation CSS3 à son image finale ?

Arrêter l'animation CSS3 à son image finale

Lorsque vous travaillez avec des animations CSS3, il peut être souhaitable de figer définitivement l'animation à la fin de sa trame finale. Cela peut être particulièrement utile pour les animations qui déplacent des éléments hors de l'écran.

Une méthode pour y parvenir consiste à utiliser la propriété animation-fill-mode. Lorsqu'il est défini sur forwards, il garantit que l'élément conserve l'apparence de sa dernière image animée même une fois le cycle d'animation terminé.

Par exemple, dans l'animation donnée avec des images clés nommées "colorchange":

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

Pour arrêter définitivement l'animation à l'image finale, ajoutez animation-fill-mode: forwards; à l'élément animé :

.animated-element {
  animation-name: colorchange;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

Cela garantira qu'une fois l'animation terminée, l'élément reste mis à l'échelle à 0,5, pivoté de 5 degrés et traduit vers la position finale spécifiée dans l'image clé à 100 %.

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!