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

У меня есть сценарий, в котором я пытаюсь объединить веб-анимации с помощью обещаний (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(s) кажутся ...обещающими.

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

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

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

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