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

book
Combining Transitions

We can combine all transition-related properties into one line.

css
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

css
transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Shorthand form

css
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.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 6

Pregunte a AI

expand
ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

We use cookies to make your experience better!
some-alt