Habituellement, lorsque la valeur de la propriété CSS change, le navigateur mettra immédiatement à jour le style correspondant. Par exemple, lorsque la souris survole l'élément, le style défini via le sélecteur :hover sera immédiatement appliqué à l'élément. Une fonction de transition a été ajoutée à CSS3, grâce à laquelle vous pouvez passer en douceur des éléments d'un style à un autre dans un délai spécifié, similaire à une simple animation, mais sans recourir à Flash ou JavaScript.
CSS fournit 5 propriétés liées à la transition, comme suit :
Pour réussir la mise en œuvre d’un effet de transition, deux choses doivent être définies :
(1) Propriétés des paramètres et effets de transition dans les éléments ;
(2) La durée de l’effet de transition.
Astuce : L'effet de transition se produit généralement lorsque la souris survole l'élément. Si la durée de transition n'est pas définie, l'effet de transition ne prendra pas effet car la valeur par défaut du temps de transition est 0.
1. propriété de transition
L'attribut transition-property est utilisé pour définir le nom de l'attribut dans l'élément qui participe à la transition. Le format de syntaxe est le suivant :
propriété de transition : aucun | tout | propriété ;
La description des paramètres est la suivante :
none : indique qu'aucun attribut ne participe à l'effet de transition ;
all : indique que tous les attributs participent à l'effet de transition ;
property : définit une liste de noms de propriétés CSS qui appliquent des effets de transition. Utilisez des virgules pour séparer plusieurs noms de propriétés.
L'exemple de code est le suivant :
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width,background;}div:hover{width:200px;background- couleur:bleu;}</style></head><body><div></div></body></html>Résultats en cours d'exécution :
2. durée de transition
L'attribut transition-duration est utilisé pour définir le temps nécessaire à la transition (en secondes ou millisecondes). La syntaxe est la suivante :
durée de transition : temps ;
Parmi eux, le temps est le temps nécessaire pour terminer l'effet de transition (en secondes ou millisecondes). La valeur par défaut est 0, ce qui signifie qu'il n'y aura aucun effet.
Si plusieurs attributs participent à la transition, vous pouvez également définir le temps de transition pour ces attributs à tour de rôle. Utilisez des virgules pour séparer plusieurs attributs, tels que la durée de transition : 1s, 2s, 3s ;. De plus, vous pouvez également utiliser une heure pour définir la durée requise pour la transition pour toutes les propriétés participant à la transition. L'exemple de code est le suivant :
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width,background;transition-duration:.25s,1s;}div :hover{width:200px;background-color:blue;}</style></head><body><div></div></body></html>3. fonction de synchronisation de transition
L'attribut transition-timing-function est utilisé pour définir le type d'animation de transition. Les valeurs facultatives de l'attribut sont les suivantes :
4. délai de transition
L'attribut transition-delay est utilisé pour définir le moment où l'effet de transition commence. Le format de syntaxe de l'attribut est le suivant :
délai de transition : temps ;
Parmi eux, le paramètre time permet de définir le temps d'attente avant le début de l'effet de transition, en secondes ou millisecondes.
5. transition
L'attribut de transition est l'abréviation des quatre attributs ci-dessus. Grâce à cet attribut, les quatre attributs ci-dessus peuvent être définis en même temps. Le format syntaxique des attributs est le suivant :
transition : propriété de transition durée de transition fonction de synchronisation de transition délai de transition ;
Dans l'attribut transition, transition-property et transition-duration sont des paramètres obligatoires, et transition-timing-function et transition-delay sont des paramètres facultatifs. Ils peuvent être omis s'ils ne sont pas nécessaires. De plus, plusieurs groupes d'effets de transition peuvent également être définis via l'attribut de transition. Chaque groupe est séparé par des virgules. L'exemple de code est le suivant :