<div class="wrap">
  <div class="box" id="elem"></div>
</div>
.wrap {
  position: relative;
  height: 200px;
}

.box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  background-color: #ea0f9b;
  width: 30px;
  height: 30px;
}
var relativeValues = anime({
  targets: '#elem',
  translateX: {
    value: '+=150',
    duration: 1000
  },
  width: {
    value: '-=10',
    duration: 1800,
    easing: 'easeInOutSine'
  },
  height: {
    value: '*=4',
    duration: 1800,
    easing: 'easeInOutSine'
  },
  direction: 'alternate',
  loop: true,
  delay: 500
});

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