Explication détaillée de la propriété Transition en CSS3 et partage d'exemples_CSS/HTML

1. Syntaxe de transition-property
[css]
transition-property : all (tous les attributs modifiés) || [attr] (spécifiez le style à déplacer) || aucun (Aucun changement d'attribut)

2. Valeur d'attribut de la propriété de transition
(1) aucun : la transition arrêtera l'exécution immédiatement
(2) tous : l'effet de transition sera exécuté lorsqu'une valeur d'attribut de l'élément change
( 3) attr : Spécifiez le style à déplacer

1. Propriété de transition——Spécifiez le style à déplacer

　1. Syntaxe de transition-property
[css]
transition-property : all (tous les attributs modifiés) || [attr] (spécifiez le style à déplacer) ||

2. Valeur d'attribut de la propriété de transition
(1) aucun : la transition arrêtera l'exécution immédiatement
(2) tous : l'effet de transition sera exécuté lorsqu'une valeur d'attribut de l'élément change
( 3) attr : Spécifiez le style à déplacer

2. Durée de transition
La durée de transition est la durée du processus de conversion d'élément spécifié, en secondes (s). transition-duration peut fonctionner sur tous les éléments, y compris :before et :after

Pseudo élément. Sa valeur par défaut est 0, ce qui signifie que la transformation est immédiate.

3. Transition-delay - temps de retard
Transition-delay est utilisé pour spécifier l'heure à laquelle une animation commence à s'exécuter, c'est-à-dire combien de temps il faut pour démarrer la transition après avoir changé le valeur de l'attribut de l'élément. Effet, l'unité est s (seconde)

, son utilisation est très similaire à transition-duration, et peut également être appliquée à tous les éléments, y compris les pseudo-éléments :before et :after. La taille par défaut est "0", ce qui signifie que la transformation est exécutée immédiatement,

Aucun retard.

4. Fonction de synchronisation de transition - Spécifiez la forme du mouvement
Fonction de synchronisation de transition : facilité (ralentit progressivement) | linéaire (vitesse constante) | | faciliter la sortie (ralentir) | faciliter l'entrée (accélérer d'abord puis diminuer

Vitesse) | cubique-bézier (Cette valeur permet de personnaliser une courbe de temps) (nombre, nombre, nombre, nombre>)

5. Méthode d'écriture complète de transition
[css]
Sélecteur d'élément {transition : style de mouvement, durée, forme de mouvement, temps de retard ;>

6. Méthode d'écriture complète et compatible de transition

　1. Noyau Mozilla
[css]
Sélecteur d'élément {-moz-transition : style de mouvement, durée, forme de mouvement, temps de retard ;}

　2. Noyau du Webkit
[css]
Sélecteur d'élément {-webkit-transition : style de mouvement, durée, forme de mouvement, temps de retard ;}

　3. Noyau Opera
[css]
Sélecteur d'élément {-o-transition : style de mouvement, durée, forme de mouvement, temps de retard ;>

　4. Norme W3C
[css]
Sélecteur d'élément {transition : style de mouvement, durée, forme de mouvement, temps de retard ;>

Exemple d'effet :

Copier le code Le code est le suivant :

une{transition:all .6s easy- in-out ;-webkit-transition:tous les .6s facilitent l'entrée-sortie;-moz-transition:tous les .6s facilitent l'entrée-sortie;-o-transition:tous les .6s facilitent l'entrée-sortie;-ms-transition :tous les 6s sont faciles à entrer;}