The animation-duration
property in CSS specifies the length of time an animation takes to complete one cycle. It defines how long the entire animation process will last, from the start to the end of the animation sequence. This property is crucial for controlling the speed and timing of animations applied to elements.
Syntax
element {
animation-duration: time;
}
time
: The duration of the animation. It can be specified in seconds (s
) or milliseconds (ms
). For example,2s
represents 2 seconds, and500ms
represents 500 milliseconds.
How It Works
Define the Keyframes:
- Create a
@keyframes
rule that defines the stages of the animation.
@keyframes moveRight { from { transform: translateX(0); } to { transform: translateX(100px); } }
- Create a
Apply the Animation:
- Use the
animation-duration
property to set how long the animation will take to complete.
.animated-box { width: 100px; height: 100px; background-color: blue; animation-name: moveRight; animation-duration: 3s; }
- This example will move the
.animated-box
element 100px to the right over a duration of 3 seconds.
- Use the
Example
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Duration Example</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-150px);
}
60% {
transform: translateY(-75px);
}
}
.bouncing-box {
width: 100px;
height: 100px;
background-color: red;
animation-name: bounce;
animation-duration: 2s;
}
</style>
</head>
<body>
<div class="bouncing-box"></div>
</body>
</html>
Explanation:
@keyframes bounce
:- Defines an animation named
bounce
that makes the element move up and down in a bouncing effect.
- Defines an animation named
.bouncing-box
:- The
animation-name
property applies thebounce
animation to the element. - The
animation-duration
property is set to2s
, meaning the entire bouncing animation will complete in 2 seconds.
- The
Important Points
Units:
- The
animation-duration
property accepts values in seconds (s
) and milliseconds (ms
). For longer animations, seconds are typically used, while milliseconds are used for more precise timing.
- The
Default Value:
- The default value is
0s
, which means if theanimation-duration
is not specified, the animation will not play.
- The default value is
Multiple Animations:
- If you apply multiple animations to an element, you need to specify the duration for each animation in a comma-separated list.
element { animation-name: fadeIn, moveRight; animation-duration: 2s, 3s; }
- In this case, the
fadeIn
animation will take 2 seconds, and themoveRight
animation will take 3 seconds.
Animation Timing:
- Adjusting the
animation-duration
affects the overall timing of the animation. Shorter durations make the animation faster, while longer durations slow it down.
- Adjusting the