The animation-name property defines the name (or comma-separated names) of @keyframes defined animations to apply.


selector { 

    animation-name: keyframename | none | initial | inherit;



The values accepted by animation-name property are:

  • keyframename; The name of the keyframe attached to the animated element.
  • none; The default value. Disables the automation and is very useful to disable animations coming from cascade (inherited).
  • initialinherit

Every animation needs an animation-name, and the animation-duration property set greater than the default value 0s, however, all the other animation-properties are optional, as their default values don’t prevent an animation from happening. 


An animation-name property example with other needed properties:


›› go to examples ››