Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele 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.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 6

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookCombining Transitions

Pyyhkäise näyttääksesi valikon

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.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 6
some-alt