Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Välja Rätt Övergångsegenskaper | Skapa Mjuka Övergångar i CSS
Avancerade CSS-tekniker

bookVälja Rätt Övergångsegenskaper

Vi kan ange vilken CSS-egenskap som helst som ett värde för egenskapen transition-property. Det innebär att vi kan tillämpa en övergångseffekt på vilken egenskap som helst.

transition-property: ... /* any property */

Vi arbetar med några vanliga egenskaper som ofta används vid övergångar. Egenskaperna transition-duration, transition-timing-function och transition-delay förblir alltid desamma. Alla övergångar reagerar på när markören hovrar.

index.html

index.html

index.css

index.css

copy

Flera övergångsegenskaper

Vi kan också använda värdet all för egenskapen transition-property, vilket innebär att alla egenskaper kommer att övergå.

transition-property: all;

I följande exempel vill vi övergå förändringen av egenskaperna background-color, color, font-weight och font-size. Granska filen index.css:

index.html

index.html

index.css

index.css

copy

Om vi behöver lägga till en övergång på flera egenskaper men inte alla, kan vi ange dem som värde för egenskapen transition-property, separerade med mellanslag. Till exempel:

transition-property: color border height;

Det betyder att övergången kommer att tillämpas på egenskaperna color, border och height.

question mark

Vad bestämmer egenskapen transition-property?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 2

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

Awesome!

Completion rate improved to 2.04

bookVälja Rätt Övergångsegenskaper

Svep för att visa menyn

Vi kan ange vilken CSS-egenskap som helst som ett värde för egenskapen transition-property. Det innebär att vi kan tillämpa en övergångseffekt på vilken egenskap som helst.

transition-property: ... /* any property */

Vi arbetar med några vanliga egenskaper som ofta används vid övergångar. Egenskaperna transition-duration, transition-timing-function och transition-delay förblir alltid desamma. Alla övergångar reagerar på när markören hovrar.

index.html

index.html

index.css

index.css

copy

Flera övergångsegenskaper

Vi kan också använda värdet all för egenskapen transition-property, vilket innebär att alla egenskaper kommer att övergå.

transition-property: all;

I följande exempel vill vi övergå förändringen av egenskaperna background-color, color, font-weight och font-size. Granska filen index.css:

index.html

index.html

index.css

index.css

copy

Om vi behöver lägga till en övergång på flera egenskaper men inte alla, kan vi ange dem som värde för egenskapen transition-property, separerade med mellanslag. Till exempel:

transition-property: color border height;

Det betyder att övergången kommer att tillämpas på egenskaperna color, border och height.

question mark

Vad bestämmer egenskapen transition-property?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 2
some-alt