Combiner 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.
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 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.04Combiner 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.
Merci pour vos commentaires !
