<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',
loop: true
});
animation.add({
targets: '.one',
keyframes: [
{translateY: -50, backgroundColor: 'rgb(255, 0, 0)' },
{translateY: 0, backgroundColor: 'rgb(128, 128, 128)'}
]
}).add({
targets: '.two',
keyframes: [
{translateY: -50, backgroundColor: 'rgb(0, 255, 0)' },
{translateY: 0, backgroundColor: 'rgb(128, 128, 128)'}
]
}, '-=900').add({
targets: '.three',
keyframes: [
{translateY: -50, backgroundColor: 'rgb(0, 0, 255)' },
{translateY: 0, backgroundColor: 'rgb(128, 128, 128)'}
]
}, '-=800');
External CSS
This Pen doesn't use any external CSS resources.