Comment utiliser l'animation de transition en CSS3

Nous savons qu'il existe un attribut de transition dans CSS3, qui permet d'implémenter l'animation au niveau CSS. Il n'utilise ni setInterval() ni timer, mais le C++ sous-jacent effectue le rendu, de sorte que. La qualité et la fluidité de l'animation rendue sont de loin supérieures à celles de JS et jQuery. Jetons un coup d'œil à l'utilisation spécifique de cet attribut de transition aujourd'hui.

Pour renverser notre mode de pensée traditionnel consistant à créer des animations de pages Web, dans les pages mobiles d'aujourd'hui, il n'y aura jamais d'animations complétées par setInterval(), mais toutes sont implémentées par 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, transition effect none S'il n'y a pas d'attribut, l'effet de transition sera obtenu.

Tous les attributs recevront des effets de transition.

property définit une liste de noms de propriétés CSS qui appliquent des effets de transition. La liste est séparée par des virgules.

transition-duration Spécifiez le nombre de secondes ou de millisecondes dont l'effet de transition doit se terminer. Spécifiez 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'elle n'aura aucun effet.

fonction de synchronisation de transition

Spécifiez 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 d'entrée-sortie facile 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 transition

Quels attributs peuvent participer à la transition

Presque tous les attributs CSS peuvent effectuer une transition.

Transition JQuery

couleur d'arrière-plan

position d'arrière-plan

image d'arrière-plan

Toute transformation de déformation peut effectuer une transition

Conditions de déclenchement pour l'animation de transition

Tout changement dans CSS déclenchera la transition. Par exemple : survolez, ajoutez et soustrayez des catégories, ou définissez simplement CSS directement.

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

Le changement de nom de classe déclenchera une animation de transition :

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

Remarque particulière : la transition ne peut pas être héritée.

Il existe de nombreuses façons d'utiliser l'attribut de transition. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture connexe :

Quels sont les nouveaux attributs d'arrière-plan dans CSS3

Comment utiliser CSS3 Media Inquiry

Comment créer une boîte flexible en CSS3

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!