[csswg-drafts] [css-animations-2] Add the `animation-end-delay` property (#13863)

ydaniv has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-animations-2] Add the `animation-end-delay` property ==
Today the Web Animations API allows setting the [`endDelay`](https://www.w3.org/TR/web-animations-1/#dom-effecttiming-enddelay) property of an effect, which sets the [`end-delay`](https://www.w3.org/TR/web-animations-1/#end-delay) of the animation.

The spec says:
> An [end delay](https://drafts.csswg.org/web-animations-1/#end-delay) may also be specified but is primarily only of use when sequencing animations such as by using a [sequence effect](https://www.w3.org/TR/web-animations-2/#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](https://codepen.io/editor/ydaniv/pen/019dd83c-7254-77ba-8217-dd91260a0f48), or in short, consider this case:

```css
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 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13863 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 29 April 2026 20:19:07 UTC