CSS animation-duration Property

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

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

<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>
.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;
}

Browser Support

The following table will show you the current browser support for the CSS animation-duration property.

Desktop
Edge Chrome Firefox Opera Safari
124316309
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
4316309443

Last updated by CSSPortal on: 31st December 2023