CSS animation-duration Property

The animation-duration CSS property defines the length of time (in seconds or milliseconds) that an animation takes to complete one cycle of animation. Very often the animation shorthand property is used to set all animation properties at once. Default value for the animation-duration property is 0.

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;

Let’s try an example where the duration of animation is 7 seconds.

Example

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

See another example where the animation duration is set to 6 seconds.

Example

<!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
time Specifies the length of time an animation takes to cycle. This can be specified in seconds or milliseconds. Default value is 0.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Related resources

Animation, @keyframes, align-content, align-self, border, width, height, padding, color, background-color.




Related articles