<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'
  })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js