Comment puis-je faire en sorte que les animations CSS restent en place une fois terminées dans Webkit ?

Comprendre la persistance des animations CSS Webkit

Lors de l'utilisation d'animations CSS3, il est courant de rencontrer un scénario dans lequel l'élément animé revient à son état d'origine lors de l'utilisation d'animations CSS3. réalisation de l'animation. Bien que ce comportement s'aligne sur la logique standard de cessation d'animation, il peut sembler contre-intuitif dans certains cas d'utilisation.

Considérez l'exemple fourni, où un élément "drop_box" est animé pour supprimer 100 px à l'aide de la syntaxe CSS Webkit. Une fois l'animation terminée, le texte dans la zone revient à sa position initiale.

Résoudre le problème de persistance

Pour éviter ce comportement indésirable, Webkit fournit le -webkit -propriété animation-fill-mode. Cette propriété vous permet de spécifier comment les styles de l'élément doivent persister après la fin de l'animation. En définissant -webkit-animation-fill-mode: forwards, vous demandez au navigateur de conserver l'état final de l'animation, en garantissant que l'élément reste dans sa position transformée.

Exemple de code

Le code CSS modifié suivant illustre l'utilisation de -webkit-animation-fill-mode pour conserver l'état final de l'animation :

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

Avantages de la persistance

L'utilisation de -webkit-animation-fill-mode: forwards offre plusieurs avantages :

• Préservation de l'état final : L'état final de l'animation est maintenu, permettant des transitions plus fluides et une expérience visuelle plus fluide.
• Contrôle des animations complexes : Il permet la création d'animations complexes qui seraient autrement difficiles à mettre en œuvre sans JavaScript.
• Expérience utilisateur améliorée : En conservant l'état final, les animations apparaissent plus naturelles et moins abruptes, améliorant ainsi l'interaction globale de l'utilisateur avec la page Web.

Conclusion

En tirant parti du -webkit-animation-fill-mode, les utilisateurs de Webkit peuvent surmonter le problème de la réversion de l'état de l'animation et obtenir des effets visuels sophistiqués et persistants. Cette technique permet aux développeurs Web de créer des expériences Web attrayantes et dynamiques qui captivent le public et offrent une expérience utilisateur supérieure.

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!