Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS @keyframes Rule

Posted in CSS Tutorial
Updated on Sep 30, 2024
By Mari Selvan
👁️ 14 - Views
⏳ 4 mins
💬 1 Comment
CSS @keyframes Rule

Photo Credit to CodeToFun

🙋 Introduction

The @keyframes rule in CSS is used to define animations. It allows you to create complex animations by specifying a series of keyframes. Keyframes define the states of the animation at specific points in time.

Using @keyframes, you can animate CSS properties to create smooth transitions and engaging visual effects on your website.

💡 Syntax

The syntax for the @keyframes rule is as follows:

Syntax
Copied
Copy To Clipboard
@keyframes animation-name {
  from {
    /* Initial state */
  }
  to {
    /* Final state */
  }
}

Alternatively, you can use percentage values to define intermediate states:

Syntax
Copied
Copy To Clipboard
@keyframes animation-name {
  0% {
    /* Initial state */
  }
  50% {
    /* Intermediate state */
  }
  100% {
    /* Final state */
  }
}

🎛️ Default Value

The @keyframes rule does not have a default value because it is used to define custom animations. The behavior of the animation is determined by the keyframes you specify.

🏠 Property Values

ValueDescription
animation-nameThe name of the animation defined by @keyframes.
fromThe starting point of the animation.
toThe ending point of the animation.
percentageSpecific points in the animation timeline (e.g., 0%, 50%, 100%).

📄 Example

Basic Animation

In this example, we create a simple animation that changes the background color of a <div> element from blue to red.

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 @keyframes Example</title>
  <style>
    @keyframes colorChange {
      from {
        background-color: blue;
      }
      to {
        background-color: red;
      }
    }

    .animated-box {
      width: 100px;
      height: 100px;
      animation: colorChange 3s infinite;
    }
  </style>
</head>
<body>
  <h1>Animation with @keyframes</h1>
  <div class="animated-box"></div>
</body>
</html>

Advanced Animation

In this example, we create a more complex animation that moves an element in a square path.

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 @keyframes Example</title>
  <style>
    @keyframes moveSquare {
      0% {
        transform: translateX(0) translateY(0);
      }
      25% {
        transform: translateX(100px) translateY(0);
      }
      50% {
        transform: translateX(100px) translateY(100px);
      }
      75% {
        transform: translateX(0) translateY(100px);
      }
      100% {
        transform: translateX(0) translateY(0);
      }
    }

    .moving-box {
      width: 100px;
      height: 100px;
      background-color: green;
      animation: moveSquare 4s infinite;
    }
  </style>
</head>
<body>
  <h1>Square Path Animation with @keyframes</h1>
  <div class="moving-box"></div>
</body>
</html>

🖥️ Browser Compatibility

The @keyframes rule is well-supported across modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. To ensure the best experience for your users, it's always a good practice to test animations across different browsers.

🎉 Conclusion

The @keyframes rule is a powerful feature in CSS that allows you to create complex animations by defining keyframes.

By specifying the states of an animation at various points in time, you can create smooth transitions and dynamic visual effects that enhance the user experience. Experiment with different keyframes and animation properties to see how you can bring your website 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