Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS animation-delay Property

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

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

👨‍💻 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