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.

Syntax

animation-name: [ none | identifier | -ms-bar | -ms-ring ] [ , [ none | identifier | -ms-bar | -ms-ring ] ] *

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 Store app using JavaScript only. Changes the appearance of the indeterminate progress control to a bar.

-ms-ring

Windows Store app using JavaScript only. Changes the appearance of the indeterminate progress control to a ring.

CSS information

Standards information

• CSS Animations Module Level 3, Section 3.2

Remarks

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

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:

#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; }

See also

CSSStyleDeclaration

currentStyle

style

a

abbr

b

bdo

br

cite

code

em

i

img

input

kbd

label

q

samp

select

small

span

strong

sub

sup

textArea

var

address

blockQuote

div

dl

fieldSet

form

ol

p

pre

table

ul

dd

dt

li

tBody

td

tFoot

th

tHead

tr

button

del

ins

map

object

script

How to bring your webpage to life with CSS transforms, transitions, and animations

Internet Explorer 10 Guide for Developers: CSS Animations

::-ms-fill

@keyframes

Build date: 11/29/2012