animation-name

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
Percentages: N/A

Syntax

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

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

A slide-in animation that executes once, much like a transition.

h1 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

View live example

A repeating pulse animation that shrinks and dims an element, then restores it.

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

View live example

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

CSS Animations: Working Draft

Microsoft Developer Network: Windows Internet Explorer API reference Article