The animation-name property in CSS specifies the name of the @keyframes animation to be applied to an element. It is a crucial part of the CSS animation framework, as it links the element to the defined animation sequence created with @keyframes.

Syntax

element { animation-name: name; }
  • name: The name of the @keyframes animation you want to apply to the element. This name must match the name used in the @keyframes rule.

How It Works

  1. Define the Keyframes:

    • Create a @keyframes rule with a specific name. This rule contains the stages of the animation, specifying how the element should change over time.
    @keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } }
  2. Apply the Animation:

    • Use the animation-name property to reference the keyframes defined earlier.
    .box { width: 100px; height: 100px; background-color: orange; animation-name: slide; animation-duration: 2s; }
    • This applies the slide animation to the .box element, which will move it horizontally by 100px over 2 seconds.

Example

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animation Name Example</title> <style> @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animated-box { width: 100px; height: 100px; background-color: blue; animation-name: fadeIn; animation-duration: 3s; } </style> </head> <body> <div class="animated-box"></div> </body> </html>

Explanation:

  • @keyframes fadeIn:

    • Defines an animation named fadeIn that transitions the opacity of an element from 0 (completely transparent) to 1 (completely opaque).
  • .animated-box:

    • Applies the fadeIn animation to the element.
    • The animation-name property specifies the animation to use.
    • The animation-duration property sets the length of the animation to 3 seconds.

Important Points

  1. Naming:

    • The value of animation-name must match exactly with the name used in the @keyframes rule. Any mismatch will result in no animation being applied.
  2. Multiple Animations:

    • You can specify multiple animations by separating them with commas.
    element { animation-name: fadeIn, slide; animation-duration: 3s, 2s; }
    • In this example, the element will apply both fadeIn and slide animations simultaneously, with different durations for each.
  3. Animation References:

    • You can reference the same @keyframes name in different elements, allowing for reuse of animations across your CSS.