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

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

Applies Toblock-level and inline-level elements
Mediavisual
Inheritedno
Initial Valuenone

Standards information

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

a
abbr
address
b
bdo
blockQuote
br
button
cite
code
CSSStyleDeclaration
currentStyle
dd
del
dfn
div
dl
dt
em
fieldSet
form
i
img
input
ins
kbd
label
li
map
object
ol
p
pre
q
samp
script
select
small
span
strong
style
sub
sup
table
tBody
td
textArea
tFoot
th
tHead
tr
ul
var
How to bring your webpage to life with CSS transforms, transitions, and animations
Internet Explorer 10 Guide for Developers: CSS Animations
::-ms-fill
@keyframes

 

 

Show:
© 2014 Microsoft