animation-name property

Identifies one or more animation names. An animation name selects a Cascading Style Sheets (CSS) @keyframes at-rule.

This property is read/write.

CSS Animations Module Level 3, Section 3.2

Syntax

Property values

One or more of the following values, separated by commas.

none: Initial value. No animation is applied.
identifier: The name of the @keyframes at-rule.
-ms-bar: Windows app using JavaScript only. Changes the appearance of the indeterminate progress control to a bar.
-ms-ring: Windows app using JavaScript only. Changes the appearance of the indeterminate progress control to a ring.

CSS information

Applies To	block-level and inline-level elements
Media	visual
Inherited	no
Initial Value	none

Standards information

CSS Animations Module Level 3, Section 3.2

Remarks

Do not use the Microsoft vendor prefix ("-ms-") before the CSS animations properties. They are supported unprefixed in Internet Explorer 10 and later.

To learn more about CSS animations, see How to bring your webpage to life with CSS transforms, transitions, and animations.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-animation-name" as an alias for this property.

Examples

To change the appearance of a progress control from a ring to a bar, use the animation-name property to style the progress control's ::-ms-fill pseudo-element. Here are some examples:

CSS


#my-progress-ring::-ms-fill { animation-name: -ms-ring; }
#my-progress-ring::-ms-fill { animation-name: none; }
/* The bar animation is the default, 
   so you need below only if you have some other 
   style in your document setting it to ring animation */
#my-progress-ring::-ms-fill { animation-name:-ms-bar; }