<div id="elems">
<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>.box{
background-color: #ea0f9b;
width: 30px;
height: 10px;
margin-bottom: 10px;
margin-left: 15px;
}var easeOut = anime.timeline();
easeOut
.add({
targets: '#elems .OutQuad', translateX: 250, offset: 0,
easing: 'easeOutQuad'
})
.add({
targets: '#elems .OutCubic', translateX: 250, offset: 0,
easing: 'easeOutCubic'
})
.add({
targets: '#elems .OutQuart', translateX: 250, offset: 0,
easing: 'easeOutQuart'
})
.add({
targets: '#elems .OutQuint', translateX: 250, offset: 0,
easing: 'easeOutQuint'
})
.add({
targets: '#elems .OutSine', translateX: 250, offset: 0,
easing: 'easeOutSine'
})
.add({
targets: '#elems .OutExpo', translateX: 250, offset: 0,
easing: 'easeOutExpo'
})
.add({
targets: '#elems .OutCirc', translateX: 250, offset: 0,
easing: 'easeOutCirc'
})
.add({
targets: '#elems .OutBack', translateX: 250, offset: 0,
easing: 'easeOutBack'
})
External CSS
This Pen doesn't use any external CSS resources.