The animation-duration property is a fundamental part of CSS animations. It specifies the length of time that a single cycle of an animation should take to complete. This value is defined in seconds (s) or milliseconds (ms).
Example 1: Simple Color Transition
/* style.css */
@keyframes colorChange {
from { background-color: lightblue; }
to { background-color: steelblue; }
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
/* This animation will take 4 seconds to complete one cycle */
animation-name: colorChange;
animation-duration: 4s;
animation-iteration-count: infinite;
}
HTML
<div class="box"></div>
Explanation This code defines a keyframe animation named colorChange that transitions an element's background color. The .box class applies this animation and sets the animation-duration to 4s, meaning it takes four seconds to fade from lightblue to steelblue.
Example 2: Element Movement
/* style.css */
@keyframes moveRight {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
.mover {
width: 50px;
height: 50px;
background-color: tomato;
/* A very fast animation duration of 500 milliseconds */
animation-name: moveRight;
animation-duration: 0.5s; /* Equivalent to 500ms */
animation-direction: alternate;
animation-iteration-count: infinite;
}
HTML
<div class="mover"></div>
Explanation Here, the moveRight animation moves an element horizontally across the screen. The animation-duration is set to 0.5s, creating a very quick movement over half a second. The animation will move to the right and then alternate back to the left.
Example 3: Pulsing Effect
/* style.css */
@keyframes pulse {
50% { transform: scale(1.1); }
}
.circle {
width: 80px;
height: 80px;
background-color: gold;
border-radius: 50%;
/* The pulse effect completes one full cycle in 2 seconds */
animation-name: pulse;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
HTML
<div class="circle"></div>
Explanation This example creates a "pulsing" effect by scaling an element up and then back down. The animation-duration of 2s controls the speed of the pulse, making one complete pulse (scaling up and returning to original size) last for two seconds.
Example 4: Slow Rotation
/* style.css */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loader {
width: 60px;
height: 60px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
/* A slow and steady 10-second rotation for a loading spinner */
animation-name: spin;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
HTML
<div class="loader"></div>
Explanation The .loader element continuously rotates 360 degrees, simulating a loading indicator. By setting the animation-duration to a lengthy 10s, we create a slow and steady spinning motion, which is often desirable for loaders.
Example 5: Multiple Durations (Conceptual)
/* style.css */
@keyframes slideAndFade {
0% { transform: translateX(0); opacity: 1; }
50% { transform: translateX(100px); opacity: 0.5; }
100% { transform: translateX(0); opacity: 1; }
}
.multi {
width: 70px;
height: 70px;
background-color: mediumpurple;
/* You can't set multiple durations for one animation name directly */
/* This example uses a single duration for the entire keyframe sequence */
animation-name: slideAndFade;
animation-duration: 3s;
animation-iteration-count: infinite;
}
HTML
<div class="multi"></div>
Explanation This example demonstrates a combined animation of sliding and fading. While you apply a single animation-duration of 3s to the entire animation sequence, the timing of different effects is controlled by the percentages within the @keyframes rule itself. The full slideAndFade animation takes three seconds to complete its cycle.