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
Avancerade CSS-tekniker

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?

Awesome!

Completion rate improved to 2.04

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