Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Combiner les transitions | Création de Transitions Fluides en CSS
Techniques CSS Avancées

bookCombiner les transitions

Il est possible de regrouper toutes les propriétés liées à la transition sur une seule ligne.

transition: <property> <time> <time_function> <delay>;

Supposons qu'il soit nécessaire d'ajouter une propriété de transition à l'élément. Les attentes sont les suivantes :

  • modification de la propriété background-color ;
  • durée de 1.2s ;
  • fonction de temps ease-in-out ;
  • délai de 250ms.

Forme longue

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Forme abrégée

transition: background-color 1200ms ease-in-out 250ms;

Remarque

Il n'y a aucune différence de syntaxe pour le navigateur. Nous pouvons choisir l'option que nous préférons.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 6

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 part of the shorthand transition property does?

Are there other properties besides background-color that can be transitioned?

Why would I use the shorthand form instead of the long form?

Awesome!

Completion rate improved to 2.04

bookCombiner les transitions

Glissez pour afficher le menu

Il est possible de regrouper toutes les propriétés liées à la transition sur une seule ligne.

transition: <property> <time> <time_function> <delay>;

Supposons qu'il soit nécessaire d'ajouter une propriété de transition à l'élément. Les attentes sont les suivantes :

  • modification de la propriété background-color ;
  • durée de 1.2s ;
  • fonction de temps ease-in-out ;
  • délai de 250ms.

Forme longue

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Forme abrégée

transition: background-color 1200ms ease-in-out 250ms;

Remarque

Il n'y a aucune différence de syntaxe pour le navigateur. Nous pouvons choisir l'option que nous préférons.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 6
some-alt