Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Choix des Bonnes Propriétés de Transition | Création de Transitions Fluides en CSS
Techniques CSS Avancées

bookChoix 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy

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.

question mark

Que détermine la propriété transition-property ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 2

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

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

bookChoix 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy

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.

question mark

Que détermine la propriété transition-property ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 2
some-alt