[css-animations] Add keyframe selectors for the animationstart and animationend events

[simevidas]

Spec: https://drafts.csswg.org/css-animations/#keyframes

Maybe it would be a good idea to add start and end keyframe selectors that would represent the animationstart and animationend events. That would enable code like this:

@keyframes fadeOut {
  to { opacity: 0 }
  end { display: none }
}

It seems that, currently, authors have to apply display: none via JavaScript.

---

Related Twitter discussion

[birtles]

I'm a bit concerned about the layering here. As I understand it, the proposal is that on firing an animationend event, we would synthesize a callback that sets the style of the target element(s) using the specified properties.

That opens a few questions like:

• Are we setting the specified style? Or the animated style?

The former would be a break from the existing behavior of CSS animations (where styles apply to the animations level of the cascade) and might produce some unexpected results: e.g. you drop the corresponding animation-name declaration but the effects remain.

The latter would also produce an odd situation where the application of an animation could cause that same animation to no longer apply (since the target element would become display: none meaning it can no longer run animation effects and its existing animations would be canceled).

• Are these running as actual event handlers? And if so, can other animationend event handlers prevent them by calling preventDefault()? And what is the ordering?

I guess the answer is "no"? That these should be something else that runs prior to actual event handlers, but after queueing said events?

I think there are a few odd situations that arise here but they're probably not too bad.

Most of all I think the problem is that CSS animations are resolved on the elements they animate and are canceled by the application of display: none to that same element.

So long as that's the case, it seems to me like applying display: none is best done by something orthogonal to the animations themselves.

For Web Animations, display: none does not have the side effect of canceling the animation so we could investigate allowing display: none there. I know we've tried in the past but hit implementation issues. I don't think they're insurmountable, however and should probably be revisited.

SVG/SMIL animation allows setting the display property since, like Web Animations, the elements/objects that produce the animation are independent of the elements being animated.

If we need to have a declarative syntax for this that applies to CSS animations, then I think something like a pseudo class keyed on the animation name would at least address the first question since the styles would clearly be separate to the animation styles so it's obvious where they apply in the style cascade and obvious that their application is somewhat independent of the animation itself.