Compréhension approfondie de la façon d'utiliser la transition en CSS3

L'animation peut être implémentée au niveau CSS. À l'heure actuelle, au lieu d'utiliser setInterval() ou timer, le C++ sous-jacent est utilisé pour le rendu. La qualité et la fluidité de l'animation rendue sont bien supérieures à JS et jQuery.

Pour renverser notre mode de pensée traditionnel consistant à créer des animations de pages Web, dans les pages mobiles d'aujourd'hui, absolument aucune animation n'est complétée par setInterval(), mais est toutes implémentée via une transition. Dans les 2 à 3 prochaines années, le côté PC sera également comme ça, et les fonctions setInterval() et animate seront éliminées lors de la transition.

Syntaxe : transition : propriété durée timing-function delay L'unité de temps est : secondes (s).

transition-property spécifie le nom de la propriété CSS, et l'effet de transition est aucun. S'il n'y a pas d'attribut, l'effet de transition sera obtenu. all Toutes les propriétés recevront l'effet de transition. property définit une liste de noms de propriétés CSS séparés par des virgules qui appliquent l'effet de transition. transition-duration Spécifie le nombre de secondes ou de millisecondes nécessaire à l'effet de transition pour se terminer. Spécifie le temps (en secondes ou en millisecondes) nécessaire pour terminer l'effet de transition. La valeur par défaut est 0, ce qui signifie qu'il n'y aura aucun effet.

fonction de transition-timing spécifie la courbe de vitesse de l'effet de transition

effet de transition linéaire qui commence et se termine à la même vitesse (égale à cubique-bézier(0,0,1,1 )).
la facilité commence lentement, puis devient plus rapide, puis se termine lentement (cubic-bezier(0.25,0.1,0.25,1)).
effet de transition facile qui démarre à une vitesse lente (égale à cube-bézier(0.42,0,1,1)).
effet de transition d'assouplissement qui se termine à une vitesse lente (égale à cube-bézier(0,0,0.58,1)).
effet de transition de facilité d'entrée qui commence et se termine à une vitesse lente (égale à cube-bézier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) définit sa propre valeur dans la fonction cubique-bezier. Les valeurs possibles sont comprises entre 0 et 1.
transition-delay définit le moment où l'effet de transition commence. Spécifiez le nombre de secondes ou de millisecondes à attendre avant le début de l'effet de commutation.

Quels attributs peuvent participer à la transition ?

Presque toutes les propriétés CSS peuvent faire l'objet d'une transition.
Transition JQuery
background-color
background-position
background-image
Toute transformation de déformation peut effectuer une transition

Quelles sont les conditions de déclenchement de l'animation de transition ?

Tout changement apporté au CSS déclenchera une transition. Par exemple : survolez, ajoutez et soustrayez des catégories, ou définissez simplement CSS directement.
Par exemple :
Définir directement CSS déclenchera une animation de transition :

document.getElementById("box").style.width = "300px";

Changer le nom de la classe déclenchera une animation de transition :

document.getElementById("box").className = "long";

Remarque : transition ne peut pas être hérité.

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!