<div id="elems">
<div class="box linear"></div>
<div class="box InQuad"></div>
<div class="box InCubic"></div>
<div class="box InQuart"></div>
<div class="box InQuint"></div>
<div class="box InSine"></div>
<div class="box InExpo"></div>
<div class="box InCirc"></div>
<div class="box InBack"></div>
</div>.box{
background-color: #ea0f9b;
width: 30px;
height: 10px;
margin-bottom: 10px;
margin-left: 15px;
}
var easeIn = anime.timeline();
easeIn
.add({
targets: '#elems .linear', translateX: 250, offset: 0,
easing: 'linear'
})
.add({
targets: '#elems .InQuad', translateX: 250, offset: 0,
easing: 'easeInQuad'
})
.add({
targets: '#elems .InCubic', translateX: 250, offset: 0,
easing: 'easeInCubic'
})
.add({
targets: '#elems .InQuart', translateX: 250, offset: 0,
easing: 'easeInQuart'
})
.add({
targets: '#elems .InQuint', translateX: 250, offset: 0,
easing: 'easeInQuint'
})
.add({
targets: '#elems .InSine', translateX: 250, offset: 0,
easing: 'easeInSine'
})
.add({
targets: '#elems .InExpo', translateX: 250, offset: 0,
easing: 'easeInExpo'
})
.add({
targets: '#elems .InCirc', translateX: 250, offset: 0,
easing: 'easeInCirc'
})
.add({
targets: '#elems .InBack', translateX: 250, offset: 0,
easing: 'easeInBack'
})
This Pen doesn't use any external CSS resources.