[csswg-drafts] [css-animations-2] Composed Animations with existing keyframes (#7574)

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

== [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](https://codepen.io/bramus/pen/PoRRLpP/8b4c0ab44e9f1e45c009e2db44b5f068):

```css
#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](https://codepen.io/bramus/pen/bGvvZrB/10608e00c472e7afe81a501a314fdf36): each individual animation is repeated, instead of the whole block.

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

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


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


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

Received on Thursday, 4 August 2022 19:18:14 UTC