CSS - animation-name Property

The CSS property animation-name identifies the @keyframes rules that define the animation of an element. These rules, which are listed as a comma-separated sequence, describe the animation behavior. If a specified name doesn't correspond to any @keyframes rule, no properties are animated.

The shorthand property animation proves to be practical, as it enables the simultaneous configuration of all animation-related properties.

Possible Values

The CSS property animation-name can have one of the following values:

  • none - A specific term indicating the absence of keyframes. It's used to disable an animation without changing the order of the other identifiers, or to disable animations inherited from the cascade.

  • <custom-ident> - This identifier names the animation with a combination of upper and lower case letters from a to z, numbers from 0 to 9, underscores (_) and/or hyphens (-). The first character, with the exception of hyphens, must be a letter.

    In addition, the identifier must not begin with two hyphens, and certain keywords like none, unset, initial, or inherit cannot be used as identifiers.

Note: When multiple comma-separated values on an animation-* property is specified, the values are applied to the animations in the order in which the animation-names appear.

Syntax

animation-name = [ none | <keyframes-name> ]#  
<keyframes-name> = <custom-ident> | <string>

Applies To

All the HTML elements, ::before and ::after pseudo-elements.

CSS animation-name - Assigning Name

  • In the example, animation-name: slide; denotes the animation sequence defined in @keyframes slide {...} for use with the .box element.

  • This property creates a link that allows the element to access and apply the named animation that moves the box horizontally using the translateX transformation.

  • Through this link, the animation name property allows the target element to execute the specified animation sequence.

<html>
<head>
<style>
   @keyframes slide {
      0% { transform: translateX(0); }
      100% { transform: translateX(300px); }
   }
   .box {
      width: 100px;
      height: 100px;
      background-color: teal;
      animation-name: slide; /* Assigning the animation name */
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
   }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Advertisements