Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Kombinera Övergångar | Skapa Mjuka Övergångar i CSS
CSS-layout, effekter och Sass

bookKombinera Övergångar

Alla övergångsrelaterade egenskaper kan kombineras på en rad.

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

Anta att en övergångsegenskap behöver läggas till på elementet. Förväntat resultat:

  • ändring av egenskapen background-color;
  • tidslängd är 1.2s;
  • tidsfunktion ska vara ease-in-out;
  • fördröjning är 250ms.

Lång 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;

Obs

Det finns ingen skillnad i syntax för webbläsaren. Vi kan välja det alternativ vi föredrar.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 6

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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?

bookKombinera Övergångar

Svep för att visa menyn

Alla övergångsrelaterade egenskaper kan kombineras på en rad.

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

Anta att en övergångsegenskap behöver läggas till på elementet. Förväntat resultat:

  • ändring av egenskapen background-color;
  • tidslängd är 1.2s;
  • tidsfunktion ska vara ease-in-out;
  • fördröjning är 250ms.

Lång 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;

Obs

Det finns ingen skillnad i syntax för webbläsaren. Vi kan välja det alternativ vi föredrar.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 6
some-alt