I’m not an expert on animations, but here are my thoughts.
I don’t think you can give a callback function to animate(). You could use the finish event of an animation to then call the next animation from there. I think we agree that using the promise approach in this example is easier.
Before the Web Animation API was created you would use setInterval() to repeatedly call a function that manipulates the style attribute of an element or adds/removes classes from the element. You could for example change the width of an element by setting different values to elem.style.width every call.
Later came the requestAnimationFrame() function to optimize the animation work of the browser while you still had to manually change the styles in the function.
I hope this gives you a little insight into this topic.