CSS animation-duration Property

The animation-duration sets the timespan of an animation cycle.

The value is defined in seconds (s) or milliseconds (ms).

Example

#

A 2-second animation-duration. The cycle repeats indefinitely.

<style> 
  .animate {
    width: 80px;
    height: 80px;
    background: steelblue;
    
    animation-name: durationAnimation;
    animation-iteration-count: infinite;
    animation-duration: 2s;
  }

  @keyframes durationAnimation {
    from { transform: none; }
    to { transform: translateX(300%); }
  }
</style>

<div class="animate"></div>

Syntax

animation-duration: time | initial | inherit;

Values

#

Value Description
time Specifies the duration of the animation, expressed in seconds (s suffix) or milliseconds (ms suffix). The default is 0 means no animation.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different animation-duration values.

<style> 
  .animate-fast {
    width: 80px;
    height: 80px;
    background: steelblue;

    animation-name:fastAnimation;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-duration: 600ms;
  }

  @keyframes fastAnimation {
    from { transform: none; }
    to { transform: translateX(300%); }
  }
</style>

<div class="animate-fast"></div>

Did you know?

Did you know?

Animating text

Animating the content property can create interesting effects.

<style>
  .loader:after { 
    content: ""; 
    font-weight: 600; 
    font-size: 18px; 
    color: steelblue; 
    animation-name: work-in-progress; 
    animation-duration: 1200ms; 
    animation-iteration-count: infinite; 
  }

  @keyframes work-in-progress {
    0%  { content: "L"; }
    10% { content: "Lo"; }
    20% { content: "Loa"; }
    30% { content: "Load"; }
    40% { content: "Loadi"; }
    50% { content: "Loadin"; }
    60% { content: "Loading"; }
    70% { content: "Loading ."; }
    80% { content: "Loading .."; }
    90% { content: "Loading ..."; }
    100% { content: "Loading ...."; }
  }
</style>

<div class='loader'></div>

Browser support

This table shows when animation-duration support started for each browser.

Chrome
43.0 May 2015
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
30.0 Jun 2015
Safari
9.0 Sep 2015

You may also like

Guides