animation-name

• 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-name

This page has been flagged with the following issues:

High-level issues:

• Needs Topics

• Missing Relevant Sections

• Data Not Semantic

• Unreviewed Import

Content:

• Incomplete

• Cleanup

• Examples Best Practices

Summary

Defines one or more animations that apply to an element

Overview table

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

Syntax

• animation-name: single-animation-name

Values

single-animation-name

The name of an @keyframes rule or the keyword none (default).

Examples

View live example

CSS

h1 {
  animation-duration: 3s;
  animation-name: slidein;
}
 
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }
 
  to {
    margin-left: 0%;
    width: 100%;
  }
}

Usage

The animation-name property accepts the name of one or more animations defined in @keyframes rules, and applies the animation(s) to the selected element. Multiple values should be separated by commas.

For an animation to run, you must also specify a value for animation-duration.

Syntax

animation-name: none | identifier [ , none | identifier ] *

Standards information

• CSS Animations Module Level 3, Section 3.2

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	4.0 -webkit	16.0 5.0 -moz	10.0	12.10 12.0 -o	3.1 -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- prefix 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
• ms-fill
• @keyframes

This article contains content originally from external sources.

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