[css-animations-2] Add the `animation-end-delay` property

[ydaniv]

Today the Web Animations API allows setting the endDelay property of an effect, which sets the end-delay of the animation.

The spec says:

An end delay may also be specified but is primarily only of use when sequencing animations such as by using a sequence effect.

It's not exposed as a declarative syntax, and this was fine until now, since SequenceEffect and GroupEffect are still WIP.

However, with the introduction of animation-trigger and timeline-trigger it's now possible to create a sequence of synchronized animations using only CSS, and not having to resort to WAAPI.

The problem starts when trying to reverse such a sequence, i.e. using the play-backwards action. See example, or in short, consider this case:

ul {
  timeline-trigger: --tltr view() contain / contain;
}

li {
  animation: paint linear 0.5s calc(sibling-index() * 200ms) both;
  animation-trigger: --tltr play-forwards play-backwards;
}

Without endDelay set to max(...[delay + activeDuration for each effect]) - <self-activeDuration> - <self-delay>, when reversing the animations they all start together.
With endDelay set to the above, you get the entire sequence reversed with the staggered delays working as expected.

So, if we just add animation-end-delay authors can create such sequences using CSS without resorting to JS.

Another option would be to have some other specific mechanism to solve this problem, but I believe that for starters just exposing this property to CSS would take us there.
There is one side-effect to this, that in the above case all animations end at the same time, since the end delay is added to end time, but this is already the specced model for WAAPI.

FYI @birtles @flackr