CSS Transition Animation Shake: Pourquoi mes éléments secouent-ils lors de l'animation, comment le résoudre?

CSS Transition Animation Jitter: Résolu intelligemment le problème du décalage d'animation

Lorsque vous utilisez l'attribut transition CSS pour créer des effets d'animation, vous rencontrez souvent une gigue d'animation ennuyeuse. Par exemple, vous voulez que l'élément se déplace vers le haut lorsque la souris plane et atteint une transition en douceur à travers transition :

 marge-fond: 64px;
Transition: Marge-fond 0,3S facilité;
Volonté: marge-fond;

Cependant, l'effet réel peut provoquer un tremblement des éléments à plusieurs reprises à la limite de l'animation. En effet, l'utilisation margin-bottom avec transition , des différences subtiles dans le navigateur peuvent provoquer le bégaiement des animations lors du calcul des dispositions.

Comment éviter la gigue d'animation?

Une solution efficace consiste à utiliser l'attribut transform au lieu de margin-bottom pour atteindre le déplacement des éléments. transform ne déclenche pas la réorganisation et la réorganisation de la mise en page de la version, évitant ainsi efficacement la gigue.

Le code suivant utilise transform pour implémenter la même animation de mouvement ascendante:

 Transform: Translatey (-20px); / * Utilisez Translatey pour être plus clair * /
transition: transformer 0,3 s facilité;

En déplaçant l'élément verticalement vers le haut de 20 pixels et en utilisant transition pour contrôler l'effet de transition de transform , vous pouvez réaliser une animation en douceur et résoudre complètement le problème de la gigue causé par margin-bottom . Cette fonctionnalité de l'attribut transform en fait le meilleur choix pour faire face à de tels problèmes de gigue d'animation.

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!