Adding Delay to CSS Transitions
The transition-delay property determines the time interval before a transition animation starts. It can be utilized in creating transition sequences for various elements.
csstransition-delay: 0.5s | 500ms;
By default, the delay time is set to 0 seconds.
Let's consider the following example. When we hover over the square, the transition animation will begin in 1 second, as the transition-delay is set to 1000 milliseconds.
index.html
index.css
9
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="box">Hover me</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
.box {
background-color: darkblue;
color: white;
text-align: center;
padding-top: 44px;
width: 110px;
height: 110px;
margin: 0 auto;
border-radius: 10px;
/* This chapter focus */
transition-delay: 1000ms;
transition-duration: 500ms;
transition-property: transform;
transition-timing-function: cubic-bezier(0.55, 1.57, 0.8, 0.22);
}
.box:hover {
transform: rotate(-180deg);
}
/* Not the current focus */
* {
box-sizing: border-box;
}
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 3. Capítulo 5
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
