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
Media: Visual
Computed value: As specified
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.animationDuration

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