Comment puis-je faire en sorte que mes animations CSS Webkit restent à leur état final ?

Préserver l'état final des animations CSS Webkit : une solution persistante

Le problème vient de la nature transitoire des animations CSS3, où elles sont momentanément modifiez les styles des éléments et revenez aux paramètres initiaux une fois terminé. Cela peut entraîner des transitions brusques ou des incohérences visuelles. Pour résoudre ce problème, Webkit introduit une solution via la propriété -webkit-animation-fill-mode.

Réponse :

Utilisant -webkit-animation-fill-mode, les développeurs peuvent obtenir des états finaux collants pour leurs animations. En le définissant sur « vers l'avant », les styles modifiés appliqués pendant l'animation persistent même après la fin de l'animation. Cela garantit que l'élément conserve sa position finale.

Exemple :

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

Dans cet exemple, le texte « Hello World » s'animera comme prévu, en descendant de 100 px. Cependant, contrairement au scénario initial, il restera dans cette position finale, évitant ainsi tout saut intempestif ou transition brusque.

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!