Chasing effect in CSS:

 A step-by-step guide on how to create the chasing loader CSS animation effect. Here are the steps:

Create the HTML:

<div class="loader"> 
  <div class="square"></div> 
  <div class="square"></div> 
  <div class="square"></div> 
</div>

This HTML structure sets up a container <div> with three child <div> representing the squares that will move in a chasing animation.

CSS:

.loader { width: 100px;  height: 100px;
  position: relative;  
background-color: #e6e6e6;
transform:translate(50%, 50%);}
.square { width: 30px;  height: 30px;  background-color: #3498db; position: absolute;  animation: chase 1.5s infinite;  }
.square:nth-child(2) { animation-delay: 0.5s;  }/* Add a delay to the second square */
.square:nth-child(3) { animation-delay: .8s; }/* Add a delay to the third square */
/*animation position of square*/
@keyframes chase { 0%, {top:0; left: 0; }
  25%{
top:0; left: 70%;}
  50%{
    top:70%; left:70%;
  }
   75% {top:70%; left: 0; }
   100%{top:0; left:0;
    }
 
 }

• We style the loader container and each square. Adjust the dimensions, colors, and positions as needed.

• The animation property is applied to all squares, making them use the chase animation with a duration of 1.5 seconds and an infinite loop.

• We use nth-child pseudo-classes to add different animation delays to the squares, creating the chasing effect.

• The @keyframes rule defines the chase animation. It moves the squares horizontally from left to right and back within the loader container.

see Demo: Codepen