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.
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 3. Capítulo 6
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.04
Combining Transitions
Deslize para mostrar o 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-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.
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 3. Capítulo 6