Setting 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.
csstransition-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.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<p>Please, hover the container</p>
<div class="items">
<span>500ms</span>
<span>1500ms</span>
<span>3000ms</span>
<span>no value</span>
</div>
</div>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* This chapter focus */
span:nth-child(1) {
transition-duration: 500ms;
}
span:nth-child(2) {
transition-duration: 1500ms;
}
span:nth-child(3) {
transition-duration: 3000ms;
}
.container:hover span {
font-size: 42px;
}
/* Not the current focus */
.container {
border: 2px solid orange;
border-radius: 10px;
padding: 10px;
margin: 0 auto;
}
p {
font: 24px;
font-weight: 700;
text-align: center;
}
.items {
display: flex;
justify-content: space-around;
}
span {
border-radius: 10px;
Var alt klart?
Tak for dine kommentarer!
Sektion 3. Kapitel 3
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat