Combining Transitions
We can combine all transition-related properties into one line.
transition: <property> <time> <time_function> <delay>;
Let's imagine we need to add a transition property to the element. We expect:
- the change of the
background-colorproperty; - the time duration is
1.2s; - the time function must be
ease-in-out; - the delay is
250ms.
Long form
transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;
Shorthand form
transition: background-color 1200ms ease-in-out 250ms;
Note
There isn't any difference in syntax for the browser. We can select any option we like more.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
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.04Combining Transitions
Swipe to show menu
We can combine all transition-related properties into one line.
transition: <property> <time> <time_function> <delay>;
Let's imagine we need to add a transition property to the element. We expect:
- the change of the
background-colorproperty; - the time duration is
1.2s; - the time function must be
ease-in-out; - the delay is
250ms.
Long form
transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;
Shorthand form
transition: background-color 1200ms ease-in-out 250ms;
Note
There isn't any difference in syntax for the browser. We can select any option we like more.
Thanks for your feedback!
