<div class="boxs">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="buttons">
  <button id="play">PLAY</button>
  <button id="pause">PASUE</button>
  <button id="reset">RESET</button>
  <button id="reverse">REVERSE</button>
</div>

body{
  padding: 0;
  margin: 0;
}

.box{
  width: 50px;
  height: 20vh;
}

.box:nth-of-type(1){
  background-color: #091E1E;
}

.box:nth-of-type(2){
  background-color: #13423E;
}

.box:nth-of-type(3){
  background-color: #468067;
}

.box:nth-of-type(4){
  background-color: #DEE762;
}

.box:nth-of-type(5){
  background-color: #EE9E4C;
}
let play = document.getElementById('play');
let pause = document.getElementById('pause');
let reset = document.getElementById('reset');
let reverse = document.getElementById('reverse');
let box = document.querySelectorAll('.box');
let array = [];

for(let i = 0; i < box.length; i++){
  let element = box[i];
  var animationElement = element.animate([
    {'transform': 'translate(0vw)','offset': 0,easing: 'ease-in-out'},
    {'transform': 'translate(35vw)','offset': 0.2,easing: 'ease-in'},
    {'transform': 'translate(50vw)','offset': 0.8,easing: 'ease-in'},
    {'transform': 'translate(100vw)','offset': 1,easing: 'ease-in-out'}
  ],{
    duration: 1800,
    iterations: Infinity,
    delay: 300 * i
  });
  animationElement.pause();
  array.push(animationElement);
}

play.addEventListener('click', () => {
  for(let i = 0; i < array.length; i++){
    array[i].play();
  }
});

pause.addEventListener('click', () => {
  for(let i = 0; i < array.length; i++){
    array[i].pause();
  }
});

reset.addEventListener('click', () => {
  for(let i = 0; i < array.length; i++){
    array[i].currentTime = 0;
  }
});

reverse.addEventListener('click', () => {
  for(let i = 0; i < array.length; i++){
    array[i].reverse();
  }
});
View Compiled
Rerun