Animate

animate.js

const rafPromise = _ => new Promise(r => requestAnimationFrame(r));

const transEndPromise = ele => new Promise(r => {
    ele.addEventListener('transitionend', function f() {
      ele.removeEventListener('transitionend', f);
      r();
    });
});

const animate = (ele, styles) => {
   Object.assign(ele.style, styles);
  
   return transEndPromise(ele)
    .then(_ => rafPromise());
}

/// EXAMPLE

const element = document.querySelector('.box');

async function main() {
  await rafPromise();
  
  await animate(element, {transform: 'translateX(400px)', backgroundColor: 'blue'})
  await animate(element, {transform: 'translateY(200px) scale(0.5)', backgroundColor: 'green'});
  await animate(element, {transform: 'translateX(0px)', backgroundColor: 'red'})
  
  main();
}

main();