animation-duration

• Comments from section
• All comments
• Help

WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free.

This tool helps to make and review comments inline.

How to Use

insert instructions, with images, here

animation-duration

This page has been flagged with the following issues:

High-level issues:

• Needs Topics

• Missing Relevant Sections

• Data Not Semantic

• Unreviewed Import

Content:

• Incomplete

• Not Neutral

• Cleanup

• Examples Best Practices

W3C Recommendation

Summary

Specifies how long an animation takes to complete one cycle

Overview table

Initial value	0s
Applies to	all elements
Inherited	No
Media	visual
Computed value	as specified
Animatable	No
CSS Object Model Property

Syntax

• animation-duration: time

Values

time

Floating-point number, followed by a time units designator (ms [milliseconds] or s [seconds]). For more information about the supported time units, see CSS Values and Units Reference.

Examples

View live exampleAn animation duration of 5 seconds.

CSS

animation-duration: 5s;

Usage

The animation-duration property takes as its value one or more times as a comma-separated list. If multiple times are specified, they are applied to the animations in the same order as animation-name.

If more animation-duration values are declared than corresponding animation-name values, the excess durations are ignored. If fewer animation-duration values are declared than corresponding animation-name values, the list of durations is repeated from the beginning until the animation-name values are exhausted.

Syntax

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

Standards information

• CSS Animations W3C Working Draft, Section 3.3
• CSS Animations Module Level 3, Section 3.3

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	4.0 -webkit	16.0 5.0 -moz	10.0	12.1 12.0 -o	4.0 -webkit

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic Support	2.1 -webkit	7.0 -webkit	18.0 -webkit	16.0 15.0 -moz	WP 8 (IE 10)	12.1	Unsupported	3.2 -webkit

Compatibility notes

Browser	Version	Note
Internet Explorer	10.0	The -ms- prefixed property is deprecated and should not be used.

See also

Related articles

Animation

• JavaScript animation

• requestAnimationFrame

• @keyframes

• css/cssom/CSSKeyframeRule

• css/cssom/CSSKeyframeRule/keyText

• css/cssom/CSSKeyframeRule/style

• css/cssom/CSSKeyframesRule

• css/cssom/CSSKeyframesRule/cssRules

• css/cssom/CSSKeyframesRule/deleteRule

• css/cssom/CSSKeyframesRule/findRule

• css/cssom/CSSKeyframesRule/insertRule

• css/cssom/CSSKeyframesRule/name

• cubic-bezier

• steps

• animation

• animation-delay

• animation-direction

• animation-duration

• animation-fill-mode

• animation-iteration-count

• animation-name

• animation-play-state

• animation-timing-function

• Animations

• transition

• transition-timing-function

• SVG animation

• Making things move with CSS3 animations

• Dynamic visual effects with CSS3 transitions

Related pages (MSDN)

• CSSStyleDeclaration
• currentStyle
• style
• a
• abbr
• acronym
• b
• bdo
• big
• br
• cite
• code
• dfn
• em
• i
• img
• input
• kbd
• label
• q
• samp
• select
• small
• span
• strong
• sub
• sup
• textArea
• tt
• var
• address
• blockQuote
• div
• dl
• fieldSet
• form
• noFrames
• noScript
• ol
• p
• pre
• table
• ul
• dd
• dt
• li
• tBody
• td
• tFoot
• th
• tHead
• tr
• button
• del
• ins
• map
• object
• script

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]