[css-animations-2] Composed Animations with existing keyframes

This is a split-off from https://github.com/w3c/csswg-drafts/issues/7044 where it was suggested to allow authors to use existing keyframes as part of a larger set of keyframes.

Say you load up a library like https://animate.style/ which offers a bunch of keyframes out of the box: fadeIn, bounceIn, …

If authors wants to chain these animations, they need to attach all of them and delay each subsequent animation. As demonstrated in this demo:

#target {
  animation: fadeInDown 2s, flip 0.5s 2s, fadeOutDown 2s 2.5s;
  animation-fill-mode: forwards;
}

This is a bit clunky, as the author needs to calculate each animation-delay by adding up all animation-duration values of all preceding animations.

Additionally authors cannot repeat this composed animation, as demonstrated in this demo: each individual animation is repeated, instead of the whole block.

#target {
  animation: fadeInDown 2s, flip 0.5s 2s, fadeOutDown 2s 2.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

(Sidenote: this iteration part could be solved by allowing a delay in between iteration – as proposed in https://github.com/w3c/csswg-drafts/issues/4459 – but this would be more number wrangling for the author)

--

It would be nice if authors had an easier way to do this. I was thinking of a way to compose the existing keyframes in a new keyframes block, one way or the other.

The goal would be to have a new set of keyframes that, for example:

• run the existing fadeInDown from 0% to 45%
• run the existing flip from 45% to 55%,
• run the existing fadeOutDown from 55% to 100

This new set of keyframes could then be used as any other set of keyframes.

I was thinking somewhere along the lines of this:

@keyframes composed {
  0% 45% fadeInDown;
  45% 55% flip;
  55% 100% fadeOutDown;
}

Syntax of course to be discussed. Order of the arguments? Might we need another at-rule? Maybe extra blocks?

Start by reading the split-off issue 7044 and the two linked CodePen demonstrations, then compare them with the proposed composed @keyframes syntax in this issue. Done means the CSS Animations proposal has an agreed syntax and semantics for combining existing keyframes into one sequence that can be used and repeated as a single animation.