CSS @keyframes Rule

Posted in CSS Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

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

@keyframes animation-name {
  from {
    /* Initial state */
  }
  to {
    /* Final state */
  }
}

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

Syntax

Copied

@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

Value	Description
animation-name	The name of the animation defined by `@keyframes`.
from	The starting point of the animation.
to	The ending point of the animation.
percentage	Specific 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

<!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

<!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.