CSS animation-duration Property

The animation-duration property defines the length of time (in seconds or milliseconds) that an animation takes to complete its one cycle. Very often the animation shorthand property is used to set all animation properties at once. Default value for the animation-duration property is 0, which means that the animation starts immediately and the keyframes don’t have an effect. Negative values are invalid and they cause the property to be ignored. But they may be considered as equal to 0s by some earlier implementations.

When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.

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

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

Syntax

animation-duration: time | initial | inherit;

Example of the animation-duration property:

<!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>

Example of the animation-duration property having duration of 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, nudge 6s linear 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>

Values

Value Description Play it
time Specifies the length of time an animation takes to cycle. This can be specified in seconds or milliseconds. Default value is 0. Play it »
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

chrome firefox safari opera
43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Practice Your Knowledge

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

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?