Let's take a quick look on how to create a simple, but attractive bouncing animation that can be used a loader animation. 

What we're going to use

• animation-name
• animation-duration
• animation-iteration-count
• animation-timing-function
• animation-delay
• transform with scale and translate

Create a wrapper div and three divs inside of it with the classes of .cirlce1, .circle2 and .circle3.

<div class="wrapper">

  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
   
</div>

We want our loader to be aligned to the center of the screen. Make our body 100% height and width and set it to absolute positioning. for the .wrapper, we're going to set to display:flex and justify-content:center and align-items:center.

body {
  position:absolute; 
  width:100%;
  height:100%;
}
.wrapper {
  
  display:flex;
  flex-direction:row;
  width:100%;
  height:100%;
  justify-content:center;
  align-items:center;
  position:relative;
}

Make our circles width and height to 100px width a 50% border radius.

We need to have separate CSS for each circle since each one will have it's own animation-delay applied to it.

Animation

• animation-name - Self explanatory. Sets the name of our animation.
• animation-duration - Sets the length that it takes the animation to finish 1 iteration.
• animation-iteration-count - The amount of times you want the animation to repeat. Set it to infinite if you want it to continue forever.
• animation-timing-function - Uses a mathematical function called Cubic Bezier Curve which specifies the speed curve of the animation. It's meant to help keep animations smooth. You can use preset settings or create your own steps.
• animation-delay - How long to delay the animation before it begins.

.circle1 {
  background:#40ded3;
  animation-name:move-circle;
  animation-duration:1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animaton-delay:.25s;
  -webkit-animation-delay:.25s;
  -moz-animation-delay:.25s;
}

.circle2 {
  background:#40de8f;
  animation-name:move-circle;
  animation-duration:1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animaton-delay:.35s;
  -webkit-animation-delay:.35s;
  -moz-animation-delay:.35s;
  
}

.circle3 {
  background:#b7de40;
  animation-name:move-circle;
  animation-duration:1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animaton-delay:.45s;
  -webkit-animation-delay:.45s;
  -moz-animation-delay:.45s;
}

Now let's put the animation in motion! Using @keyframes, we are going to set custom animation frames.

To make our animation smooth, we are going to set several custom key frames and adjust the X and Y axis of our circles. We want to make our circles appear as they are leaping off the ground then landing with a slight bounce. To do this, we use the transform: scale() and translate().

@keyframes move-circle {
 0%   { transform: scale(1,1)    translateY(0); 
  }
 10%  { transform: scale(1.2, .9)
 translateY(10px);
  }
  30% { transform: scale(.9, 1.2)
  translateY(-100px)
  }
  50% { transform: scale(1.2,.9)
  translateY(0)
  }
  57% {transform: scale(1.1,.9)
  translateY(-7px);
  }
  75% {transform: scale(1,1)
  translateY(0)
  }
  100% {transform: scale(1,1)
  translateY(0)
  }
  
}

Final Output!