<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.