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
Media: Visual
Computed value: As specified
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.animationName

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

HTML

<div class="test"></div>

CSS

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

Result