About Lesson
Animation Duration
Specifies the duration of an animation, indicating how long the animation cycle should take to complete.
- 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 2 seconds */
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* Apply the animation with a duration of 2 seconds to an element */
.element {
animation-name: slide-in;
animation-duration: 2s;
background-color: blue;
height: 50px;
width: 50px;
color: aliceblue;
}
</style>
</head>
<body>
<div class="element">
</div>
</body>
</html>