<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 class="box OutQuad"></div>
<div class="box OutCubic"></div>
<div class="box OutQuart"></div>
<div class="box OutQuint"></div>
<div class="box OutSine"></div>
<div class="box OutExpo"></div>
<div class="box OutCirc"></div>
<div class="box OutBack"></div>
<div class="box InOutQuad"></div>
<div class="box InOutCubic"></div>
<div class="box InOutQuart"></div>
<div class="box InOutQuint"></div>
<div class="box InOutSine"></div>
<div class="box InOutExpo"></div>
<div class="box InOutCirc"></div>
<div class="box InOutBack"></div>
</div>
.box{
background-color: #ea0f9b;
width: 20px;
height: 5px;
margin-bottom: 5px;
margin-left: 15px;
}
var all = anime.timeline();
all
.add({
targets: '#elems .linear', translateX: 250, offset: 0, duration: 2000,
easing: 'linear'
})
.add({
targets: '#elems .InQuad', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInQuad'
})
.add({
targets: '#elems .InCubic', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInCubic'
})
.add({
targets: '#elems .InQuart', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInQuart'
})
.add({
targets: '#elems .InQuint', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInQuint'
})
.add({
targets: '#elems .InSine', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInSine'
})
.add({
targets: '#elems .InExpo', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInExpo'
})
.add({
targets: '#elems .InCirc', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInCirc'
})
.add({
targets: '#elems .InBack', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInBack'
})
.add({
targets: '#elems .OutQuad', translateX: 250, offset: 0, duration: 2000,
easing: 'easeOutQuad'
})
.add({
targets: '#elems .OutCubic', translateX: 250, offset: 0, duration: 2000,
easing: 'easeOutCubic'
})
.add({
targets: '#elems .OutQuart', translateX: 250, offset: 0, duration: 2000,
easing: 'easeOutQuart'
})
.add({
targets: '#elems .OutQuint', translateX: 250, offset: 0, duration: 2000,
easing: 'easeOutQuint'
})
.add({
targets: '#elems .OutSine', translateX: 250, offset: 0, duration: 2000,
easing: 'easeOutSine'
})
.add({
targets: '#elems .OutExpo', translateX: 250, offset: 0, duration: 2000,
easing: 'easeOutExpo'
})
.add({
targets: '#elems .OutCirc', translateX: 250, offset: 0, duration: 2000,
easing: 'easeOutCirc'
})
.add({
targets: '#elems .OutBack', translateX: 250, offset: 0, duration: 2000,
easing: 'easeOutBack'
})
.add({
targets: '#elems .InOutQuad', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInOutQuad'
})
.add({
targets: '#elems .InOutCubic', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInOutCubic'
})
.add({
targets: '#elems .InOutQuart', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInOutQuart'
})
.add({
targets: '#elems .InOutQuint', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInOutQuint'
})
.add({
targets: '#elems .InOutSine', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInOutSine'
})
.add({
targets: '#elems .InOutExpo', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInOutExpo'
})
.add({
targets: '#elems .InOutCirc', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInOutCirc'
})
.add({
targets: '#elems .InOutBack', translateX: 250, offset: 0, duration: 2000,
easing: 'easeInOutBack'
});
This Pen doesn't use any external CSS resources.