Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Setting Transition Duration for Effects | Creating Smooth Transitions in CSS
Advanced CSS Techniques

bookSetting Transition Duration for Effects

We use the transition-duration property to specify the time during which the transition should occur. This property is expressed in seconds (e.g., 3s or 0.45s) or milliseconds (e.g., 3000ms or 450ms). When the duration of a transition is not explicitly defined, the change happens instantaneously.

transition-duration: 3s | 3000ms;

Let's run the following example to see what behaviors we can get. Please, hover over the container, and the transition will start for all elements. The difference is in the duration of the transition.

index.html

index.html

index.css

index.css

copy
question mark

Which of the following is a valid unit for expressing the transition-duration property?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 3

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

bookSetting Transition Duration for Effects

Svep för att visa menyn

We use the transition-duration property to specify the time during which the transition should occur. This property is expressed in seconds (e.g., 3s or 0.45s) or milliseconds (e.g., 3000ms or 450ms). When the duration of a transition is not explicitly defined, the change happens instantaneously.

transition-duration: 3s | 3000ms;

Let's run the following example to see what behaviors we can get. Please, hover over the container, and the transition will start for all elements. The difference is in the duration of the transition.

index.html

index.html

index.css

index.css

copy
question mark

Which of the following is a valid unit for expressing the transition-duration property?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 3
some-alt