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

I've yet to check out "group/sequence effects" but did start jamming on some solutions to this a while back where the custom properties would be generated for you to handle calculating the delays for sequencing things.

That "tricky" or "nice to have" part would be some form of `animation-repeat-delay` 🙏  Touched upon it in this [CSS Tricks article](https://css-tricks.com/a-css-slinky-in-3d/#aa-but-how-can-we-do-this-without-javascript). Anything to avoid padding keyframes 😅 

Whichever solution is proposed to tackle this, I think it would be likely best to think in terms of how timelines are designed elsewhere. If you're composing something, it's likely the default thinking from the designer that things will chain. For example, take a look at how we would do things with [Greensock's position parameter](https://greensock.com/position-parameter/). You could be explicit about a start and end point or have things like the following. I'd played on the idea of a property. But, some way to say "run these keyframes in this way. 

```css
/* Basic chain */
animation-composition: fadeInDown, flip, fadeOutDown;
/* flip starts half a second before the end of fadeInDown. fadeOutDown runs at end of flip */
animation-composition: fadeInDown, flip <0.5, fadeOutDown;
```

Think this is where that notion of nested keyframes works quite well though because you'd be able to infinitely loop the timeline or compose it onto another depending on the performance limitations of doing so. And that kinda leans into how JavaScript animation libraries do this again. The issue I think would be getting the translation again. Working in fractions and percentages doesn't translate well to time. It would still rely on a developer to calculate the timings and then convert them to percentages/fractions of the composed keyframes 🤔 

In something like GSAP, you'd define by time. But, then be able to speed up or slow that down by tweening the time of the timeline or managing the playback rate. Maybe something like.

```css
/* keyframes name - keyframes duration - keyframes position [optional, defaults to end of last] */
@keyframes composed-timeline {
  fade 1s,
  /* Start at the same time as fade */
  flip 2s 0,
  /* Start 1s before the end of flip */
  fadeOutDown 1s <1s
}
/* Plays the composed timeline at a sped up rate */
animation: composed-timeline 1s infinite linear;
```

-- 
GitHub Notification of comment by jh3y
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7574#issuecomment-1216296031 using your GitHub account


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

Received on Tuesday, 16 August 2022 08:14:33 UTC