CSS animation-duration Property

CSS animation-duration

The animation-duration property in CSS specifies the length of time an animation should take to complete one cycle. It is an essential property for defining how long an animation effect lasts, providing control over the speed of the animation.

Syntax of animation-duration

</>

Copy

animation-duration: time | initial | inherit;

Values

Value	Description
`time`	Defines the duration of the animation in seconds (`s`) or milliseconds (`ms`), e.g., `2s` or `500ms`. Default value is `0`, meaning no animation will occur.
`initial`	Sets the property to its default value (`0`).
`inherit`	Inherits the value from the parent element.

Default Value

0

Examples for animation-duration

Using the CSS animation-duration Property

The following examples demonstrate how the animation-duration property can be used to define the length of an animation cycle.

</>

Copy

/* Set animation duration to 2 seconds */
.element {
  animation-duration: 2s;
}

/* Set animation duration to 500 milliseconds */
.element {
  animation-duration: 500ms;
}

/* Inherit the duration value from the parent element */
.element {
  animation-duration: inherit;
}

Example for Applying animation-duration

The following example demonstrates the use of animation-duration with different durations for animation effects.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  @keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(200px);
    }
  }

  .fast {
    animation: slide 1s;
    background-color: lightgreen;
    padding: 10px;
    margin: 10px;
  }

  .slow {
    animation: slide 4s;
    background-color: lightblue;
    padding: 10px;
    margin: 10px;
  }

  .default {
    animation: slide;
    background-color: lightcoral;
    padding: 10px;
    margin: 10px;
  }
  
  div {
    width: 200px;
  }
</style>
</head>
<body>

<h1>CSS animation-duration Example</h1>

<div class="fast">Fast Animation</div>
<div class="slow">Slow Animation</div>
<div class="default">Default Animation (0s)</div>

</body>
</html>

Explanation of `animation-duration` for each class:

Fast Animation (.fast):

The animation-duration is set to 1s, meaning the animation completes one cycle in 1 second.
The slide animation moves the element from translateX(0) to translateX(200px) quickly within a 1-second interval.
The result is a light green box that slides to the right quickly.

Slow Animation (.slow):

The animation-duration is set to 4s, meaning the animation completes one cycle in 4 seconds.
The slide animation moves the element from translateX(0) to translateX(200px) at a slower pace, taking 4 seconds to complete the motion.
The result is a light blue box that slides to the right slowly.

Default Animation (.default):

The animation-duration is not explicitly defined, so it defaults to 0s.
With a duration of 0s, the animation executes instantly, without any visible transition or motion.
The result is a light coral box that immediately appears at the final position (translateX(200px)) without any sliding effect.

Browser Support

The animation-duration property is supported in most modern browsers. Below is a compatibility table:

Browser	Version
Chrome	43
Edge	10
Firefox	16
Safari	9
Opera	30

TutorialKart

CSS animation-duration Property