Comment puis-je faire en sorte qu'une animation CSS3 reste sur sa dernière image ?

Arrêter une animation CSS3 sur sa dernière image

Pour empêcher un élément animé de revenir à son état d'origine une fois l'animation terminée, vous pouvez utilisez la propriété animation-fill-mode. Cette propriété contrôle le comportement de l'élément une fois l'animation terminée.

Solution :

Pour arrêter l'animation sur sa dernière image (100%), précisez la valeur forwards pour la propriété animation-fill-mode. Cela demandera au navigateur de conserver l'état final de l'animation une fois celle-ci terminée.

Voici le code CSS mis à jour avec la valeur forward ajoutée :

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

.animated-element {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
  /* Optional: remove the element after the animation finishes */
  transition: 0.5s ease opacity;
  animation-end: hide-element;
}

@keyframes hide-element {
  100% {
    opacity: 0;
  }
}

En utilisant animation-fill- mode : en avant, l'élément restera dans son état transformé une fois l'animation terminée. De plus, la transition CSS facultative et l'image clé de fin d'animation peuvent être utilisées pour faire disparaître ou supprimer l'élément une fois l'animation terminée.

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!