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-color
property; - 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.
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 3. Kapitel 6
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 2.04
Combining Transitions
Svep för att visa menyn
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-color
property; - 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.
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 3. Kapitel 6