Request Animation Frame example

animation.html

<div class="container">
  <div class="test">Test</div>
</div>

requestAnimationFrameExample.js

// Modified from Benjamin De Cock (twitter.com/bdc)
// http://playground.deaxon.com/js/css-waapi-easing/

requestAnimationFrame(() => {
 const [js] = document.querySelectorAll(".test");
  const transform = [
    "translate(0)",
    "translate(calc(50vw - var(--size) / 2))",
    "translate(calc(100vw - var(--size)))"
  ];
  const options = {
    duration: 5000,
    easing: "cubic-bezier(.2, 1, .2, 1)",
    iterations: Infinity
  };

  js.animate({transform}, options);
});

styles.css

body {
  margin: 0
}

.container {
  --size: 200px;
  display: grid;
  height: 100vh;
  padding: 0;
  grid: auto-flow var(--size) / var(--size);
  grid-gap: 5em;
  align-content: center;
  list-style: none;
  text-align: center;
  font: 500 13px/var(--size) -apple-system, BlinkMacSystemFont, sans-serif
}

.test {
  border-radius: 50%;
  background: aquamarine;
  will-change: transform
}