<div id="elems">
<div class="box elasticity-0"></div>
<div class="box elasticity-100"></div>
<div class="box elasticity-200"></div>
<div class="box elasticity-300"></div>
<div class="box elasticity-400"></div>
<div class="box elasticity-500"></div>
<div class="box elasticity-600"></div>
<div class="box elasticity-700"></div>
<div class="box elasticity-800"></div>
<div class="box elasticity-900"></div>
<div class="box elasticity-1000"></div>
</div>.box{
background-color: #ea0f9b;
width: 30px;
height: 10px;
margin-bottom: 10px;
}var elasticity = anime.timeline();
elasticity.add({
targets: '#elems .elasticity-0', translateX: 250, offset: 0,
duration: 3000,
elasticity: 0,
})
.add({
targets: '#elems .elasticity-100', translateX: 250, offset: 0,
duration: 3000,
elasticity: 100,
})
.add({
targets: '#elems .elasticity-200', translateX: 250, offset: 0,
duration: 3000,
elasticity: 200,
})
.add({
targets: '#elems .elasticity-300', translateX: 250, offset: 0,
duration: 3000,
elasticity: 300,
})
.add({
targets: '#elems .elasticity-400', translateX: 250, offset: 0,
duration: 3000,
elasticity: 400,
})
.add({
targets: '#elems .elasticity-500', translateX: 250, offset: 0,
duration: 3000,
elasticity: 500,
})
.add({
targets: '#elems .elasticity-600', translateX: 250, offset: 0,
duration: 3000,
elasticity: 600,
})
.add({
targets: '#elems .elasticity-700', translateX: 250, offset: 0,
duration: 3000,
elasticity: 700,
})
.add({
targets: '#elems .elasticity-800', translateX: 250, offset: 0,
duration: 3000,
elasticity: 800,
})
.add({
targets: '#elems .elasticity-900', translateX: 250, offset: 0,
duration: 3000,
elasticity: 900,
})
.add({
targets: '#elems .elasticity-1000', translateX: 250, offset: 0,
duration: 3000,
elasticity: 1000,
});
External CSS
This Pen doesn't use any external CSS resources.