function transitionEndPromise(element) {

  return new Promise(resolve => {

    element.addEventListener('transitionend', function f() {

      element.removeEventListener('transitionend', f);

      resolve();

    });

  });

}

​

function requestAnimationFramePromise() {

  return new Promise(resolve => requestAnimationFrame(resolve));

}

​

function animate(element, stylz) {

  Object.assign(element.style, stylz);

  return transitionEndPromise(element)

    .then(_ => requestAnimationFramePromise());

}

​

var element = document.querySelector('div');

​

Object.assign(

  element.style,

  {

    transition: 'transform 1s, background-color 1s',

    backgroundColor: 'red',

    transform: 'translateX(0px)',

  }

);

​

requestAnimationFramePromise()

  .then(_ => animate(element, {transform: 'translateX(100px)', backgroundColor: 'blue'}))

  .then(_ => animate(element, {transform: 'translateX(50px)', backgroundColor: 'green'}))

  .then(_ => animate(element, {transform: 'translateX(0px)', backgroundColor: 'red'}))

  .then(_ => {

    element.textContent = 'I’m done animating!';

  })

​

​