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

animation-name: rounded;

animation-name: rotate;

animation-name: enlarge;

animation-name: slide;

animation-name: none;

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

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

Desktop
12	43	16	30	9

Tablets / Mobile
43	16	30	9	4	43

Last updated by CSSPortal on: 31st December 2023