animationName 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

HRESULT put_animationName(
  [in]          BSTR v
);

HRESULT get_animationName(
  [out, retval] BSTR *p
);

Property values

Type: BSTR

One or more @keyframes at-rules, separated by commas.

String format

[ none |identifier| -ms-bar | -ms-ring ][ , [ none |identifier| -ms-bar | -ms-ring ]] *

CSS information

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 IHTMLCSSStyleDeclaration2::animationName 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; }

Requirements

See also

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

Internet Explorer 10 Guide for Developers: CSS Animations

::-ms-fill

@keyframes