About Lesson
Animation Delay
Specifies the delay before an animation starts, allowing you to control when the animation begins after it is triggered.
- Value: Time in seconds (s) or milliseconds (ms).
- Default Value:
0s.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Define an animation with a duration of 1 seconds */
/* Define an animation with a delay of 1 second */
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Apply the animation with a delay of 1 second to an element */
.element {
animation-name: fade-in;
animation-duration: 1s;
animation-delay: 1s;
background-color: blue;
height: 50px;
width: 50px;
color: aliceblue;
}
</style>
</head>
<body>
<div class="element">
</div>
</body>
</html>