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

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 6

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.04

bookCombining Transitions

Sveip for å vise menyen

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.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 6
some-alt