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.

1. Code Html

   <div class="blog">
    <div class="animation"></div>
   </div>

2. Code Css

   @-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;
   }