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

<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

Desktop
10	12	43	16	30	9
Tablets / Mobile
43	43	16	30	9	4.0

Last updated by CSSPortal on: 17th October 2019