Which CSS property specifies the duration of an animation?

The CSS property that specifies how long an animation takes to complete one cycle is animation-duration.

Its value is a time measurement such as 2s or 500ms. For example, animation-duration: 2s makes a single iteration last two seconds, although the animation may repeat if animation-iteration-count is also set. The property works with keyframe animations defined using @keyframes, where the keyframes describe the intermediate styles and animation-duration controls the timing of the cycle.

Several nearby properties are easy to confuse with it. animation-delay sets the pause before an animation starts, while animation-iteration-count controls how many times it runs. transition-duration belongs to CSS transitions, which animate changes between two states rather than running a named keyframe sequence.

CSS Animations Level 1 was developed by the W3C CSS Working Group. Animation timing can also be affected by animation-timing-function, which controls the pace within the duration, and animation-direction, which determines whether alternate cycles reverse direction.