The animation-name property defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation. If the name does not match any keyframe at-rule, there are no properties to be animated and the animation will not execute.

  • Initial valuenone
  • Applies toAll elements, :before and :after pseudo elements
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript
Formal syntax: <single-animation-name> [ ',' <single-animation-name> ]* 

animation-name: [value];
<single-animation-name> = none | <IDENT>
  • noneIs a special keyword denoting no keyframes. It can be used to deactivate an animation without changing the ordering of the other identifiers, or to deactivate animations coming from the cascade.
  • <IDENT>A string identifying the animation. This identifier is composed by a combination of case-insensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-). The first non-dash character must be a letter (that is, no number at the beginning of it, even if preceded by a dash.) Also, two dashes are forbidden at the beginning of the identifier.
.class {
   animation-name: sliding-vertically;

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.