<div class="ball one"></div>
<div class="ball two"></div>
<div class="ball three"></div>

.ball {
  width: 50px;
  height: 50px;
  margin-top: 100px;
  margin-left: 10px;
  border-radius: 50%;
  background-color: gray;
  float: left;
}
let animation = anime.timeline({
  duration: 1000, 
  easing: 'easeInOutSine',
  direction: 'alternate', 
  loop: true
});           
  
animation.add({
  targets: '.one',
  translateY: -50,
  backgroundColor: 'rgb(255, 0, 0)'
}).add({
  targets: '.two',
  translateY: -50,
  backgroundColor: 'rgb(0, 255, 0)'
}).add({
  targets: '.three',
  translateY: -50,
  backgroundColor: 'rgb(0, 0, 255)'
});
  
  
  
     

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js