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.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Solutions with CSS properties

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

First of all, we add @keyframes (we use -webkit- and -moz- prefixes with @keyframes). For our @keyframes, 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 delay (5s) through the animation property and set the animation-fill-mode property to its "none" value.

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @-webkit-keyframes background {
        0% {
          top: 0;
          left: 0;
          background: #5bd97d;
        }
        40% {
          top: 100px;
          left: 50px;
          background: pink;
        }
        100% {
          top: 50px;
          left: 50px;
          background: purple;
        }
      }
      @-moz-keyframes background {
        0% {
          top: 0;
          left: 0;
          background: #5bd97d;
        }
        40% {
          top: 100px;
          left: 150px;
          background: pink;
        }
        100% {
          top: 50px;
          left: 50px;
          background: purple;
        }
      }
      @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;
        -webkit-animation: background 5s infinite;
        -moz-animation: background 5s infinite;
        animation: background 5s infinite;
        animation-fill-mode: none;
      }
    </style>
  </head>
  <body>
    <div class="animation"></div>
  </body>
</html>

Try it Yourself »

Result

In our next example, we use the "from" and "to" keywords with @keyframes instead of percentages and specify the opacity at the starting and ending points of the animation. Here, we set the animation-fill-mode property to its "forwards" value.

Example of creating an animation with a delay:

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