API веб-анимации с шаблоном Promise - чистота кода

Question

У меня есть сценарий, в котором я пытаюсь связать воедино веб-анимацию с помощью обещаний (bluebird).

Под веб-анимацией я подразумеваю анимацию в стиле element.animate. Я создал общую оболочку Animation Promise, например:

function promiseAnimation(element, keyframes, timing) {
  return new Promise(function(resolve, reject) {
    element.animate(keyframes , timing).onfinish = function(e) {
      resolve();
    }
  });
}

Затем я передаю элемент, массив и синхронизирующий объект в эту функцию. Анимация выполняется, и обещание разрешается. Единственная проблема - конечный результат выглядит немного некрасиво...

promiseAnimation(element, keyframe1, timing1 ).then(function(){
  //isn't this just as bad as callbacks?
  promiseAnimation(element, keyframe2, timing2 ).then(function(){
    alert('lolz');
  });
});

Почему некрасивый? Потому что это в основном похоже на обратные вызовы. Объединение пяти из них, похоже, оставит нечитаемый блок кода, что противоречит тому, что Promise кажется, обещают.

Я предполагаю, что альтернативой было бы вернуть функцию вместо обещания и явно выполнить ее, оставив мне что-то вроде этого:

promiseAnimation(blah,blah)()
  .then(promiseAnimation(blah,blah))

Но это также кажется далеко не идеальным. Что было бы самым чистым способом выполнить чистую цепочку обещаний, одновременно обеспечивая .then выполняется только после завершения анимации?

Вы можете увидеть мой код здесь: http://codepen.io/anon/pen/ONbXdx