How to Create an Animation with a Delay in CSS

To delay an animation, we use the CSS animation-delay property, which specifies the time between an element being loaded and the start of an animation. But there can be some difficulties when delaying the animation, such as the problem when an element disappears after the animation. Let’s see the solution to this.

Solutions with CSS properties

In the following example, there is a <div> element with a <span class="attribute">class</span> of "animation".

First of all, we add @keyframes. For our <span class="property">@keyframes</span>, we use percentages and specify the top, left, and background properties at 0%, 40%, and 100%.

Then, we style the "animation" class by setting its width and height and adding the position property with its "relative" value. We specify the duration (5s) through the animation shorthand property and set the animation-fill-mode property to its "none" value. Note that animation-fill-mode: none (the default) causes the element to revert to its initial state once the animation ends, which explicitly handles the disappearing issue by resetting the element. We also add an animation-delay of 2s to demonstrate the delay functionality.

Example of delaying an animation with the animation and animation-fill-mode properties:

example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes background {
        0% {
          top: 0;
          left: 0;
          background: #5bd97d;
        }
        40% {
          top: 100px;
          left: 150px;
          background: pink;
        }
        100% {
          top: 50px;
          left: 100px;
          background: purple;
        }
      }
      .animation {
        height: 100px;
        width: 100px;
        position: relative;
        animation: background 5s infinite;
        animation-delay: 2s;
        animation-fill-mode: none;
      }
    </style>
  </head>
  <body>
    <div class="animation"></div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5"> XFI2 </div> </div> In our next example, we use the "from" and "to" keywords with <span class="property">@keyframes</span> instead of percentages and specify the opacity at the starting and ending points of the animation. Here, we set the <span class="property">animation-fill-mode</span> property to its "forwards" value. This keeps the element visible after the animation completes by retaining the styles from the final keyframe, effectively solving the disappearing problem.

Example of creating an animation with a delay:

Example of delaying an animation:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes fadein {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      #animation1 {
        height: 120px;
        width: 120px;
        background: #5bd97d;
        opacity: 0;
        animation: fadein 1s ease-in alternate;
        animation-delay: 1s;
        animation-fill-mode: forwards;
      }
    </style>
  </head>
  <body>
    <div id="animation1"></div>
  </body>
</html>

Try it Yourself »

The animation-fill-mode property is used to set a style for an element when the animation is not playing. Its "forwards" value here is used to specify that the element must keep the style values that are set by the last keyframe.