CSS animation-duration Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The animation-duration property in CSS defines the length of time an animation takes to complete one cycle from start to finish. Essentially, it controls how quickly or slowly an animation plays. By adjusting this property, developers can influence the pacing of visual effects on a webpage, making them appear more subtle or more dynamic depending on the desired user experience. A shorter duration results in a snappier, faster animation, whereas a longer duration allows the animation to unfold more gracefully, giving elements a sense of weight or fluidity.

The effect of animation-duration is closely tied to other animation-related properties such as animation-name, which specifies the keyframes that the animation will follow, and animation-timing-function, which controls the acceleration pattern of the animation. While animation-name determines what visual changes occur, animation-duration dictates the tempo, ensuring that the animation does not feel too abrupt or too sluggish. Combined, these properties allow developers to craft precise and engaging motion experiences that can enhance the usability and aesthetics of a webpage.

Another important consideration is that animation-duration can have a significant impact on user perception and accessibility. Very fast animations may be jarring or difficult for users to follow, while extremely slow animations might feel tedious. It's often paired with animation-iteration-count, which specifies how many times the animation should repeat, to create repeated motion at a controlled speed. By thoughtfully managing animation-duration, designers can strike a balance between drawing attention to elements and maintaining a smooth, enjoyable interaction experience.

Definition

Initial value: 0s
Applies to: All elements, :before and :after pseudo elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.animationDuration

Interactive Demo

animation-duration: 1s;

animation-duration: 500ms;

animation-duration: 4s;

animation-duration: 0;

Syntax

animation-duration: <time> [, <time>]*

Values

<time>The duration that an animation should take to complete one cycle. This may be specified in either seconds (by specifying s as the unit) or milliseconds (by specifying ms as the unit). If you don't specify a unit, the declaration will be invalid.

Example

HTML

<div class="example">

  <h2>animation-duration Demo</h2>

  <div class="boxes">

    <div class="box normal">2s</div>

    <div class="box fast">1s</div>

    <div class="box slow">4s</div>

  </div>

</div>

CSS

.example {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.example h2 {
  margin: 0 0 12px 0;
  font-size: 18px;
}

.boxes {
  display: flex;
  gap: 12px;
  align-items: center;
}

.box {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border-radius: 8px;
  background: #3b82f6;
  animation-name: float;
  animation-duration: 2s; /* default duration */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.box.fast {
  background: #ef4444;
  animation-duration: 1s; /* faster */
}

.box.slow {
  background: #10b981;
  animation-duration: 4s; /* slower */
}

@keyframes float {
  0% {
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  50% {
    transform: translateY(-20px);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS animation-duration property. Hover over a browser icon to see the version that first introduced support for this CSS property.