Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Combining Transitions | Creating Smooth Transitions in CSS
Advanced CSS Techniques

bookCombining 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?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.04

bookCombining 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?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 6
some-alt