CSS animation-name Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 21 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The animation-name property in CSS is used to specify the names of keyframe animations that should be applied to an element.

By defining animations using keyframes and assigning them to an element with animation-name, you can create complex and smooth transitions, movements, or other visual effects on your web pages.

💡 Syntax

The syntax for the animation-name property is straightforward. You can specify one or more keyframe names that should be applied to the element.

Syntax

Copied

element {
  animation-name: none | keyframe-name [, keyframe-name, ...];
}

🎛️ Default Value

The default value of the animation-name property is none, which means no animation is applied.

🏠 Property Values

Value	Description
none	No animation will be applied.
keyframe-name	The name of a keyframe animation that has been defined using @keyframes.

📄 Example

In this example, we'll create a simple animation that changes the background color of a div element and apply it using the animation-name property.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS animation-name Example</title>
  <style>
    @keyframes changeColor {
      0% {
        background-color: blue;
      }
      100% {
        background-color: green;
      }
    }

    .animated-div {
      width: 100px;
      height: 100px;
      animation-name: changeColor;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
  </style>
</head>
<body>
  <h1>Div with Background Color Animation</h1>
  <div class="animated-div"></div>
</body>
</html>

🖥️ Browser Compatibility

The animation-name property is widely supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. To ensure the best experience, consider testing your animations across different browsers.

🎉 Conclusion

The animation-name property is an essential tool in CSS for applying animations to elements. By linking keyframe animations to elements using this property, you can create dynamic and visually appealing effects on your web pages. Experiment with different keyframes and animations to bring your designs to life.