CSS animation-name Property

Description

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 value
none
Applies to
All elements, :before and :after pseudo elements
Inherited
No
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.animationName

Interactive Demo

Syntax

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

Values

<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.

Example

<div class="test"></div>
.test { 
   width: 75px; 
   height: 75px; 
   border-radius: 50px;  
   position: relative; 
   -webkit-animation-name: iliketomoveit;  
   -webkit-animation-duration: 5s;  
   -webkit-animation-iteration-count: infinite; 
   animation-name: iliketomoveit; 
   animation-duration: 5s; 
   animation-iteration-count: infinite; 
} 
@ -webkit-keyframes iliketomoveit { 
   0% { 
      left: 0px;  
   } 
   25% { 
      left: 400px;  
      background: red;  
   }  
   75% { 
      left: 200px;  
   } 
   100% { 
      left: 0px;  
      background: black;  
   } 
} 
@keyframes iliketomoveit { 
   0% { 
      left: 0px;  
   } 
   25% { 
      left: 400px;  
      background: red;  
   } 
   75% { 
      left: 200px;  
   } 
   100% { 
      left: 0px;  
      background: black;  
   } 
}

Browser Support

The following table will show you the current browser support for the CSS animation-name property.

Desktop
Edge Chrome Firefox Opera Safari
124316309
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
4316309443

Last updated by CSSPortal on: 31st December 2023