CSS animation-delay Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 23 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The animation-delay property in CSS specifies the amount of time to wait before starting the animation.

This delay can be used to synchronize animations with other elements or to create a sequence of animations on a single element. It is a key property for controlling the timing and sequence of animations on a webpage.

💡 Syntax

The syntax for the animation-delay property is as follows:

Syntax

Copied

element {
  animation-delay: time;
}

Here, time can be specified using any valid CSS time value, such as s for seconds or ms for milliseconds.

🎛️ Default Value

The default value of the animation-delay property is 0s, which means the animation starts immediately.

🏠 Property Values

time: Specifies the delay before the animation starts. This can be a value in seconds (s) or milliseconds (ms). For example:
- 1s: (1 second)
- 500ms: (500 milliseconds)
initial: Sets the property to its default value, which is 0s.
inherit: The property value is inherited from its parent element.

📄 Example

In this example, we'll apply an animation to a div element that starts with a 2-second delay.

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-delay Example</title>
  <style>
    @keyframes slideIn {
      from {
        transform: translateX(-100%);
      }
      to {
        transform: translateX(0);
      }
    }

    .animated-box {
      width: 100px;
      height: 100px;
      background-color: coral;
      animation: slideIn 1s ease-in-out;
      animation-delay: 2s; /* Delay the start of the animation by 2 seconds */
    }
  </style>
</head>
<body>
  <h1>Animation with Delay</h1>
  <div class="animated-box"></div>
</body>
</html>

In this example, the .animated-box element will wait for 2 seconds before starting the slideIn animation.

🖥️ Browser Compatibility

The animation-delay property is widely supported across modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. For consistent performance, always test your animations in different browsers and devices to ensure they behave as expected.

🎉 Conclusion

The animation-delay property is a useful tool for controlling the timing of animations on your website.

By specifying a delay, you can create more complex and synchronized animations that enhance the user experience. Experiment with different delay times to see how they affect the flow of your animations and how they fit within your overall design.