animation-name

Jump to: navigation, search

animation-name


W3C Working Draft

Summary

Defines the list of animations that apply to the element.

Overview table

Initial value none
Applies to All elements, ::before and ::after pseudo-elements
Inherited No
Media visual
Computed value As specified.
Animatable No
CSS Object Model Property animationName

Syntax

  • animation-name: none
  • animation-name: <single-animation-name> [, <single-animation-name>]*


Values

none
No animation applies to the element. You can use this value to override any animations coming from the cascade.
<single-animation-name> [, <single-animation-name>]*
One or more comma-separated animation names. Each name is used to select the @keyframes rule that defines the animation. If the specified name does not match any @keyframes rule then no animation will be run for this name. In addition, when multiple animations update the same property, the animation listed last wins.


Examples

View live exampleA slide-in animation that executes once, much like a transition.

CSS

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

View live exampleA repeating pulse animation that shrinks and dims an element, then restores it.

CSS

div.selected {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    from { 
        transform : scale(1) translateX(0);
        opacity : 1;
    }
    50% { 
        transform : scale(0.75) translateX(0);
        opacity : 0.25;
    }
    to { 
        transform : scale(1) translateX(0);
        opacity : 1;
    }
}

Usage

Note that animation-name is not sufficient to run an animation. The animation-duration property also needs to be set to a non-zero duration.

When animation-name specifies a list of names, other animation properties such as animation-duration should define values corresponding to each name. If the lists of values for the other animation properties do not have the same number of values as animation-name, the length of the animation-name list determines the number of items in each list examined when starting animations. The lists are matched up from the first value: excess values at the end are not used. If one of the other properties doesn't have enough comma-separated values to match the number of values of animation-name, the list is repeated until there are enough. This truncation or repetition does not affect the computed value.


Related specifications

Specification Status Related Changes
CSS Animations Working Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?


Compatibility notes

Browser Version Note
Internet Explorer 10.0 The -ms- prefix property is deprecated and should not be used.

See also

Other articles

Attribution

This article contains content originally from external sources.

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