Comprendre la persistance des animations CSS de 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 :

.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}

Avantages de la persistance

Utiliser -webkit-animation-fill-mode : forwards offre plusieurs avantages :

• Fin -préservation de l'état : L'état final de l'animation est conservé, permettant des transitions plus fluides et un visuel plus fluide expérience.
• 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 le Web. page.

Conclusion

En tirant parti de -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 résultats sophistiqués et persistants. effets visuels. 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.