Contenu du cours
Techniques CSS Avancées
Techniques CSS Avancées
Sélection de la Propriété de Transition
Nous pouvons spécifier n'importe quelle propriété CSS comme valeur pour la propriété transition-property
. Cela signifie que nous pouvons appliquer un effet de transition à n'importe quelle propriété.
Travaillons avec quelques propriétés typiques qui sont en transition. Les propriétés transition-duration
, transition-timing-function
, et transition-delay
resteront toujours les mêmes. Toutes les transitions réagiront au survol du curseur.
index.html
index.css
Propriétés de transition multiples
Nous pouvons également utiliser la valeur all
pour la propriété transition-property
, ce qui signifie que toutes les propriétés seront en transition.
Dans l'exemple suivant, nous souhaitons faire la transition du changement des propriétés background-color
, color
, font-weight
et font-size
. Vérifions le fichier index.css
:
index.html
index.css
De plus, si nous devons ajouter une transition à plusieurs propriétés mais pas à toutes, nous pouvons les définir comme valeur pour la propriété transition-property
, en les séparant à l'aide d'un espace. Par exemple:
Cela signifie que la transition sera appliquée aux propriétés color
, border
et height
.
Merci pour vos commentaires !