Comment conserver l'état final de l'animation CSS3 inchangé

introduction

L'animation CSS3 apporte de riches effets dynamiques à la conception Web, rendant la page plus vivante et attrayante. Cependant, nous souhaitons parfois que l'animation reste dans son état final à la fin, plutôt que de revenir à son état initial. Cet article présentera plusieurs façons d'obtenir cet effet et garantira que l'animation conserve cet état à la fin de l'action.

Méthode 1 : utiliser animation-fill-mode

La propriété animation-fill-mode est utilisée pour contrôler le style de l'animation avant et après la lecture. En définissant cette propriété, vous pouvez obtenir l'effet de maintenir l'état final à la fin de l'animation.

valeur d'attribut

Exemple

 .élément {
  animation : la facilité d'entrée et de sortie de myAnimation 2 ;
  animation-fill-mode : avant ;
}
@keyframes monAnimation {
  0% {
    transformer : traduireX(0);
  }
  100 % {
    transformer : traduireX(100px);
  }
}

Dans cet exemple, l'élément .element restera dans transform: translateX(100px) après la fin de l'animation.

Méthode 2 : utiliser l'événement animationend

En écoutant animationend via JavaScript, vous pouvez définir manuellement le style de l'élément à la fin de l'animation, conservant ainsi l'état final de l'animation.

Exemple

 <div class="element"></div>

 .élément {
  largeur : 100 px ;
  hauteur : 100px ;
  couleur de fond : rouge ;
  animation : la facilité d'entrée et de sortie de myAnimation 2 ;
}
@keyframes monAnimation {
  0% {
    transformer : traduireX(0);
  }
  100 % {
    transformer : traduireX(100px);
  }
}

 const element = document.querySelector('.element');
element.addEventListener('animationend', () => {
  element.style.transform = 'translateX(100px)';
});

Dans cet exemple, lorsque l'animation se termine, le code JavaScript définit la propriété transform de l'élément sur translateX(100px) , conservant ainsi l'état final de l'animation.

Méthode 3 : utiliser l'attribut transition

Bien que la propriété transition soit principalement utilisée pour les effets de transition, en l'utilisant intelligemment, vous pouvez également obtenir l'effet de maintenir l'état final à la fin de l'animation.

Exemple

 <div class="element"></div>

 .élément {
  largeur : 100 px ;
  hauteur : 100px ;
  couleur de fond : rouge ;
  transition : transformer 2 en entrée-sortie facile ;
}
.element.animate {
  transformer : traduireX(100px);
}

 const element = document.querySelector('.element');
element.classList.add('animer');

Dans cet exemple, en ajoutant la classe animate , la propriété transform de l'élément passe de son état initial à translateX(100px) et reste dans cet état une fois la transition terminée.

Résumer

Garder l'état final d'une animation CSS3 inchangé peut être obtenu de différentes manières, notamment en utilisant animation-fill-mode , en écoutant animationend et en utilisant la propriété transition . Chaque méthode a ses scénarios applicables et les développeurs peuvent choisir la méthode appropriée en fonction de besoins spécifiques.

J'espère que cet article pourra vous fournir une compréhension claire et des conseils pratiques pour vous aider à mieux appliquer l'animation CSS3 dans le développement réel et à obtenir les effets dynamiques requis.

Ceci conclut cet article sur la façon de conserver l'état final de l'animation CSS3 inchangé. Pour plus d'informations sur le maintien de l'état final de l'animation CSS3, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes ci-dessous. faites-le à l’avenir. Soutenez downcodes.com !