animation-duration
Sets how long one animation cycle takes. The default is 0s which means no animation plays. Always set a duration when using animation-name.
CSS
Beginner
3 min read
animation-duration Property
Example
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.fast { animation-name: slide; animation-duration: 0.2s; }
.normal{ animation-name: slide; animation-duration: 0.5s; }
.slow { animation-name: slide; animation-duration: 1.5s; } Pro Tip
UI micro-animations work best between 100–400ms; decorative animations can be longer.