Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS animation-name Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
👁️ 14 - Views
⏳ 4 mins
💬 1 Comment
CSS animation-name Property

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
Copy To Clipboard
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

ValueDescription
noneNo animation will be applied.
keyframe-nameThe 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy