CSS animation-duration Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The animation-duration property sets the time in seconds or milliseconds on how long one animation cycle should last. By default, the value is 0s, which means that there is no animation.
You can specify multiple values by listing them with a comma. Negative values and values without specifying time units (s or ms) are not allowed and will be ignored.

Initial value: 0s
Applies to: All elements, :before and :after pseudo elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.animationDuration

Interactive Demo

animation-duration: 1s;

animation-duration: 500ms;

animation-duration: 4s;

animation-duration: 0;

Syntax

animation-duration: <time> [, <time>]*

Values

<time>The duration that an animation should take to complete one cycle. This may be specified in either seconds (by specifying s as the unit) or milliseconds (by specifying ms as the unit). If you don't specify a unit, the declaration will be invalid.

Example

HTML

<div class="warn fadeInLeft">Important message to users!</div>

<div class="message">Demonstration of animation-duration property, if you missed it, just click on either HTML or CSS above and then click on Result.</div>

CSS

.warn { 
   background: #fc0; 
   padding: 10px; 
} 
.fadeInLeft { 
   -webkit-animation-name: fadeInLeft; 
   -webkit-animation-duration: 1s; 
   animation-name: fadeInLeft; 
   animation-duration: 1s; 
} 
@-webkit-keyframes fadeInLeft { 
   from { 
      opacity: 0; transform: translateX(-2000px); 
   } 
   to { 
      opacity: 1; transform: none; 
   } 
} 
@keyframes fadeInLeft { 
   from { 
      opacity: 0; transform: translateX(-2000px); 
   } 
   to { 
      opacity: 1; transform: none; 
   } 
}
.message {
   margin-top: 50px;
}

Result

Editor