Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Kombinere Overganger | Lage Jevne Overganger i CSS
Avanserte CSS-teknikker

bookKombinere Overganger

Alle overgangsrelaterte egenskaper kan kombineres på én linje.

transition: <property> <time> <time_function> <delay>;

Anta at det er behov for å legge til en overgangsegenskap til elementet. Forventet:

  • endring av background-color-egenskapen;
  • varighet på 1.2s;
  • tidsfunksjon må være ease-in-out;
  • forsinkelse på 250ms.

Lang form

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

Kortform

transition: background-color 1200ms ease-in-out 250ms;

Merk

Det er ingen forskjell i syntaks for nettleseren. Vi kan velge det alternativet vi foretrekker.

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

Suggested prompts:

Can you explain what each part of the shorthand transition property does?

Are there other properties besides background-color that can be transitioned?

Why would I use the shorthand form instead of the long form?

Awesome!

Completion rate improved to 2.04

bookKombinere Overganger

Sveip for å vise menyen

Alle overgangsrelaterte egenskaper kan kombineres på én linje.

transition: <property> <time> <time_function> <delay>;

Anta at det er behov for å legge til en overgangsegenskap til elementet. Forventet:

  • endring av background-color-egenskapen;
  • varighet på 1.2s;
  • tidsfunksjon må være ease-in-out;
  • forsinkelse på 250ms.

Lang form

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

Kortform

transition: background-color 1200ms ease-in-out 250ms;

Merk

Det er ingen forskjell i syntaks for nettleseren. Vi kan velge det alternativet vi foretrekker.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 6
some-alt