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

• 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

Desktop
10	12	43	16	30	9
Tablets / Mobile
43	43	16	30	9	4.0

Last updated by CSSPortal on: 17th October 2019