CSS animation-duration Property

The animation-duration property defines the length of time (in seconds or milliseconds) that an animation takes to complete one cycle. One cycle means a single run from the 0% keyframe to the 100% keyframe; if the animation repeats, this duration applies to each repetition, not to the total run time. Very often the animation shorthand property is used to set all animation properties at once, but setting animation-duration on its own is useful when you want to override just the timing while keeping the rest of the shorthand intact.

The default value is 0s, which means the animation completes instantly and the keyframes have no visible effect. This is the single most common reason an animation "doesn't work": the @keyframes rule and animation-name are correct, but no duration was set. An animation always needs a non-zero duration to be seen.

Negative values are invalid and cause the property to be ignored (some earlier implementations may instead treat them as 0s). If you want a delayed start, use animation-delay — a negative delay is valid there and starts the animation partway through.

How duration combines with other animation properties

Duration is only one piece of an animation. It works together with:

animation-name — which @keyframes rule to run (required for anything to happen).
animation-timing-function — the speed curve within the duration (ease, linear, etc.).
animation-iteration-count — how many times the duration repeats (infinite for endless loops).
animation-delay — how long to wait before the first cycle begins.

For example, animation: pulse 2s ease-in-out 3 runs the pulse keyframes three times, each cycle lasting 2 seconds, for a total of 6 seconds of motion.

When multiple comma-separated values are specified for any animation property, they are applied in order to the corresponding animations defined in animation-name. If there are more durations than names, the extra values are ignored; if there are fewer, the list wraps around and repeats from the beginning. For instance, with two animation names and animation-duration: 1s, 2s, 3s, the third value is dropped; with animation-duration: 1s, both animations use 1s.

Seconds vs. milliseconds

1s and 1000ms are equivalent — use whichever reads more clearly. Milliseconds are handy for short UI transitions (250ms), seconds for longer looping motion (6s). The unit is required: animation-duration: 2 (no unit) is invalid and the declaration is dropped.

The animation-duration property is one of the CSS3 properties.

Initial Value	0s
Applies to	All elements, ::before and ::after pseudo-elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.animationDuration = "4s";

Syntax

Syntax of CSS animation-duration Property

animation-duration: time | initial | inherit;

Example of the animation-duration property:

Example of CSS animation-duration Property with seconds

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 7s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>

Try it Yourself »

Example of the animation-duration property having duration of 6 seconds:

Example of CSS animation-duration Property with 6 seconds

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .element {
        height: 200px;
        width: 200px;
        background-color: #1c87c9;
        animation: nudge 6s ease infinite alternate;
      }
      @keyframes nudge {
        0%,
        100% {
          transform: translate(0, 0);
        }
        60% {
          transform: translate(150px, 0);
        }
        80% {
          transform: translate(-150px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
time	Specifies the length of time an animation takes to complete one cycle. Values can be specified in seconds (`s`) or milliseconds (`ms`). Note that the default value for the property itself is `0s`, not the `time` keyword.	Play it »
initial	It makes the property use its default value (`0s`).
inherit	It inherits the property from its parent element.

Browser support

animation-duration is supported in all modern browsers. It is not inherited and not itself animatable — changing the duration mid-animation restarts timing rather than tweening it.

animation — the shorthand that sets duration alongside name, timing, delay, and more.
animation-name — names the @keyframes rule to run.
animation-delay — delays the start of the animation.
animation-iteration-count — repeats the duration a set number of times.
animation-timing-function — shapes the speed curve within the duration.
animation-fill-mode — controls styles before and after the animation runs.

Practice

What is the role of the CSS animation-duration property and how is it specified?

The CSS animation-duration property is used to define the number of seconds or milliseconds an animation takes for a complete cycle.The CSS animation-duration property is used to set the animation color in CSS.The CSS animation-duration property is specified in percentages.The CSS animation-duration property is specified in seconds (s) or milliseconds (ms).The CSS animation-duration property is responsible for defining the direction of the animation in CSS.