Lære Combining Transitions | Creating Smooth Transitions in CSS

Advanced CSS Techniques

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.

Var alt klart?

Tak for dine kommentarer!

Sektion 3. Kapitel 6

Spørg AI

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Stryg for at vise menuen

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.

Var alt klart?

Tak for dine kommentarer!

Sektion 3. Kapitel 6

some-alt