Tutorials


CSS animation-name property


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.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about