Quelle est la différence entre l'animation CSS3 et l'animation JQuery

La différence entre l'animation CSS3 et l'animation JQuery : 1. CSS3 peut définir une animation 3D, mais jquery ne peut pas réaliser d'animation 3D ; 2. L'animation matricielle 2D de CSS est plus efficace et les autres animations d'attributs sont moins efficaces. et top pour simuler l'animation matricielle est inefficace, tandis que d'autres animations d'attributs sont efficaces.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&jquery3.2.1, ordinateur Dell G3.

Quelle est la différence entre l'animation css3 et l'animation jquery ?

Comparaison des avantages et des inconvénients de l'animation css3 et de l'animation jquery :

L'animation CSS3 fournit des interfaces d'attributs d'animation 2D, 3D et conventionnelles, qui peuvent fonctionner sur n'importe quel élément du page En tant que propriété, l'animation CSS3 est écrite en langage C. Il s'agit d'une animation au niveau du système, son efficacité est donc nettement supérieure à l'animation simulée par js.

Après nos tests, nous avons constaté que l'animation CSS3 et l'animation de simulation javascript présentent les différences suivantes :

1. L'animation CSS 3D ne peut pas être implémentée dans js

L'animation 3D de CSS3 est une fonction très puissante en CSS3 car elle fonctionne Le principe est dans un espace tridimensionnel, donc js ne peut pas simuler une animation 3D comme CSS3. Bien sûr, il vaut la peine de réfléchir à la question de savoir si cette animation 3D a un large éventail de scénarios d'application pratiques...

2. l'animation est plus efficace que JS utilise la marge et la gauche, en haut pour simuler l'animation matricielle ;

L'animation 2D de CSS3 fait référence aux modifications de transformation matricielle 2D, telles que la mise à l'échelle\la déformation\l'axe x\l'axe y. Bien sûr, js ne le peut pas. faire une animation de transformation. Prenons l'exemple de l'animation de coordonnées. Après nos tests, nous avons constaté que l'utilisation de la transformation CSS3 pour effectuer une animation translationXY est près de 700 mm plus rapide que la position

gauche et la position droite en js et elle est également beaucoup plus fluide visuellement que l'animation js !

L'efficacité des autres propriétés d'animation régulières de CSS3 est inférieure à celle de l'animation simulée js

Les propriétés d'animation régulières font ici référence à : hauteur, largeur, opacité, largeur de bordure, couleur...

Nous avons travaillé sur Android HTC Dans le test, nous avons modifié un élément DOM de hauteur : 0 à hauteur : 100. Nous avons utilisé la transition et l'animation jQuery

animate et CSS3. Les résultats montrent que la transition et l'animation CSS3 sont 500 mm plus lentes que jQuery

animate. ! Les autres propriétés d'animation régulières sont 400 à 500 mm plus lentes que jQuery animate !.

(Partage de vidéos d'apprentissage :Tutoriel vidéo CSS)

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!