Comment conserver un élément dans son état final animé avec CSS ?

Maintenir l'état animé avec CSS

En CSS3, les animations ajoutent un mouvement dynamique aux éléments, mais un problème courant survient lorsque l'animation revient à son état initial une fois terminée. Cela peut être problématique pour les scénarios où le résultat souhaité est un changement permanent.

Considérez l'animation CSS suivante :

<code class="css">.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {
  from {
    -webkit-transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(100px);
  }
}</code>

Cette animation dépose un élément de 100 px vers le bas. Cependant, une fois l'animation terminée, l'élément revient à sa position d'origine.

Solution : Utilisation de -webkit-animation-fill-mode

Pour conserver l'état final de l'animation, CSS fournit le -propriété webkit-animation-fill-mode. Cette propriété contrôle ce qui arrive à l'élément avant et après l'animation. En le définissant sur forwards, l'élément reste dans son état final une fois l'animation terminée :

<code class="css">-webkit-animation-fill-mode: forwards;</code>

Cette approche garantit que l'élément animé conserve sa position modifiée même une fois l'animation terminée. Il permet des modifications transparentes et persistantes de l'apparence de l'élément, rendant les animations complexes plus précieuses au-delà des processus circulaires.

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!