Comment résoudre le problème de blocage d'animation en CSS

Résumé des solutions pour résoudre le blocage de l'animation CSS3

1. Essayez d'utiliser la transformation pour l'animation et évitez d'utiliser la hauteur, la largeur, la marge, le remplissage, etc.

La raison ; est :
Par définition, la propriété CSS transform ne modifie pas la disposition de l'élément ou de ses éléments environnants . L'attribut transform aura un impact sur l'ensemble de l'élément . Il mettra à l'échelle, fera pivoter et déplacera l'élément entier.

C'est une excellente nouvelle pour les navigateurs ! Le navigateur n'a besoin de

générer le bitmap de cet élément qu'une seule fois et de le soumettre au GPU pour traitement au démarrage de l'animation. Ensuite, le navigateur n'a pas besoin d'effectuer d'opérations de mise en page, de dessin et de soumission de bitmap. En conséquence, le navigateur peut tirer pleinement parti des capacités du GPU pour dessiner rapidement des bitmaps dans différentes positions, effectuer une rotation ou une mise à l'échelle.

Pour la raison pour laquelle il est si lent : Dans chaque image de l'animation, le navigateur doit effectuer la mise en page, dessiner et soumettre un nouveau bitmap au
GPU . Nous savons que le chargement d'un bitmap dans la mémoire du GPU est une opération relativement lente.

La raison pour laquelle le navigateur doit faire beaucoup de travail est que

le contenu de l'élément change constamment à chaque image. Changer la hauteur d'un élément peut nécessiter de changer simultanément la taille de ses éléments enfants , le navigateur doit donc recalculer la mise en page . Une fois la mise en page terminée, le thread principal doit régénérer le bitmap de l'élément.

2. Lorsque les exigences sont élevées, vous pouvez ouvrir le navigateur et activer l'accélération

matérielle GPU .

Par exemple :

1. Désormais, Chrome, FireFox, Safari, IE9+ et la dernière version d'Opera prennent tous en charge l'accélération matérielle lorsqu'ils détectent qu'un certain élément DOM de la page a été appliqué
. certain La règle CSS sera activée, et la fonctionnalité la plus importante est la transformation 3D de l'élément.

.cube {   
    -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);}

2. Mais dans certains cas, nous n'avons pas besoin d'appliquer des effets de transformation 3D aux éléments, alors que devons-nous faire ? À l'heure actuelle, nous pouvons utiliser une petite astuce pour "

tricher" le navigateur afin d'activer l'accélération matérielle.

Bien que nous ne souhaitions peut-être pas appliquer la transformation 3D aux éléments, nous pouvons toujours activer le

moteur 3D. Par exemple, nous pouvons utiliser transform: translateZ(0); pour activer l'accélération matérielle.

.cube {   
-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
-ms-transform: translateZ(0);   
-o-transform: translateZ(0);   
transform: translateZ(0);   /* Other transform properties here */}

Dans Chrome et Safari, lorsque nous utilisons des transformations ou des animations CSS, la page peut scintiller. Le code suivant peut résoudre cette situation :

.cube {   
-webkit-backface-visibility: hidden;   
-moz-backface-visibility: hidden;   
-ms-backface-visibility: hidden;  
backface-visibility: hidden;   
-webkit-perspective: 1000;   
-moz-perspective: 1000;   
-ms-perspective: 1000;   
perspective: 1000;   /* Other transform properties here */}

.

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!