Choix des Bonnes Propriétés de Transition
Il est possible de spécifier n'importe quelle propriété CSS comme valeur pour la propriété transition-property
. Cela signifie que l'effet de transition peut être appliqué à n'importe quelle propriété.
transition-property: ... /* any property */
Exemple d'utilisation de quelques propriétés couramment utilisées avec les transitions. Les propriétés transition-duration
, transition-timing-function
et transition-delay
restent inchangées. Toutes les transitions réagissent au survol du curseur.
index.html
index.css
Propriétés de transition multiples
Il est également possible d'utiliser la valeur all
pour la propriété transition-property
, ce qui signifie que toutes les propriétés seront concernées par la transition.
transition-property: all;
Dans l'exemple suivant, la transition s'applique aux modifications des propriétés background-color
, color
, font-weight
et font-size
. Consultez 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 :
transition-property: color border height;
Cela signifie que la transition sera appliquée aux propriétés color
, border
et height
.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you explain what each transition property does?
Can you show an example of how transitions look in practice?
What are some common use cases for CSS transitions?
Awesome!
Completion rate improved to 2.04
Choix des Bonnes Propriétés de Transition
Glissez pour afficher le menu
Il est possible de spécifier n'importe quelle propriété CSS comme valeur pour la propriété transition-property
. Cela signifie que l'effet de transition peut être appliqué à n'importe quelle propriété.
transition-property: ... /* any property */
Exemple d'utilisation de quelques propriétés couramment utilisées avec les transitions. Les propriétés transition-duration
, transition-timing-function
et transition-delay
restent inchangées. Toutes les transitions réagissent au survol du curseur.
index.html
index.css
Propriétés de transition multiples
Il est également possible d'utiliser la valeur all
pour la propriété transition-property
, ce qui signifie que toutes les propriétés seront concernées par la transition.
transition-property: all;
Dans l'exemple suivant, la transition s'applique aux modifications des propriétés background-color
, color
, font-weight
et font-size
. Consultez 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 :
transition-property: color border height;
Cela signifie que la transition sera appliquée aux propriétés color
, border
et height
.
Merci pour vos commentaires !