JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div></div>

CSS

div {
  height: 100px;
  width: 100px;
  background-color: rgb(161, 6, 6);
}

JavaScript

let square = document.querySelector("div")

anime.timeline()
  .add({
    targets: square,
    backgroundColor: "#3dbf7a",
    duration: 2000,
  }).add({
    targets: square,
    translateX: [0, 100],
    translateY: [0, 100],
    duration: 1000,
    changeComplete: (anim) => {
      setTimeout(() => {
        anim.restart()
      })
    }
  });



/* setTimeout(() => {
anime({
        targets: square,
        translateX: [0,100],
        translateY: [0,100],
        duration: 1000,
        loop: true,
        direction: 'alternate',
})
}, 2000) */


/*     .add({
        targets: square,
        translateX: [0,100],
        translateY: [0,100],
        duration: 1000,
        loop: true,
    }) */