CSS animation Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 33 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The animation property in CSS is a shorthand property that allows you to apply animations to elements on your web page. It enables you to create complex animations by combining multiple properties into one, such as the animation's name, duration, timing function, delay, iteration count, and direction.

This property makes it easier to animate transitions and enhance the user experience with smooth, dynamic effects.

💡 Syntax

The syntax for the animation property is as follows:

Syntax

Copied

element {
  animation: name duration timing-function delay iteration-count direction;
}

🎛️ Default Value

The default value of the animation property is:

Syntax

Copied

animation: none 0s ease 0s 1 normal;

This means no animation is applied by default.

🏠 Property Values

Value	Description
name	A valid identifier for the @keyframes rule (e.g., slide, fade).
duration	Defines the time an animation takes (e.g., 1s, 2.5s, 500ms).
timing-function	Specifies the animation's timing function (e.g., linear, ease, ease-in-out).
delay	Sets the delay before the animation starts (e.g., 0s, 0.5s).
iteration-count	Specifies how many times an animation should run (e.g., 1, infinite).
direction	Defines whether the animation should play forward, backward, or alternate (e.g., normal, reverse, alternate).

📄 Example

In this example, we'll animate a box to change its background color and move horizontally.

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 Example</title>
  <style>
    @keyframes moveAndColor {
      from {
        background-color: red;
        transform: translateX(0);
      }
      to {
        background-color: blue;
        transform: translateX(200px);
      }
    }

    .animated-box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: moveAndColor 3s ease-in-out 1s infinite alternate;
    }
  </style>
</head>
<body>
  <h1>Animating a Box</h1>
  <div class="animated-box"></div>
</body>
</html>

🖥️ Browser Compatibility

The animation property is widely supported across modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. Ensure to test your animations across different browsers to verify consistency and performance.

🎉 Conclusion

The animation property provides a robust way to create engaging animations and visual effects on your web pages.

By defining animations with @keyframes and applying them with the animation shorthand, you can bring dynamic elements to life and enhance user interaction. Experiment with different values and keyframe animations to achieve the desired visual effects for your website.