<div id="elems">
<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: 30px;
height: 10px;
margin-bottom: 10px;
margin-left: 15px;
}var easeInOut = anime.timeline();
easeInOut
.add({
targets: '#elems .InOutQuad', translateX: 250, offset: 0,
easing: 'easeInOutQuad'
})
.add({
targets: '#elems .InOutCubic', translateX: 250, offset: 0,
easing: 'easeInOutCubic'
})
.add({
targets: '#elems .InOutQuart', translateX: 250, offset: 0,
easing: 'easeInOutQuart'
})
.add({
targets: '#elems .InOutQuint', translateX: 250, offset: 0,
easing: 'easeInOutQuint'
})
.add({
targets: '#elems .InOutSine', translateX: 250, offset: 0,
easing: 'easeInOutSine'
})
.add({
targets: '#elems .InOutExpo', translateX: 250, offset: 0,
easing: 'easeInOutExpo'
})
.add({
targets: '#elems .InOutCirc', translateX: 250, offset: 0,
easing: 'easeInOutCirc'
})
.add({
targets: '#elems .InOutBack', translateX: 250, offset: 0,
easing: 'easeInOutBack'
});
External CSS
This Pen doesn't use any external CSS resources.