Re: [csswg-drafts] [css-animations-2] Declarative syntax for GroupEffects (#9554)

@birtles I've been working lately a lot on the use-case you mentioned, synching multiple animations on a single target, and I think it's imperative we address that as well.
Also, if we consider this use-case it also makes sense to be able to create reusable GroupEffects, like you mentioned.

I think we can generalize the use-cases as:

1. One animation to one target: solved.
2. One animation to multiple targets: can be addressed with the above proposal.
3. Multiple animations to a single target: needs addressing with what you described above.
4. Multiple animations to multiple targets: can be addressed with 2 + 3.

I have a raw proposal for use-case 3, it's still has some open questions, but I think it's a good start.

The gist of it:

Add a new at-rule for declaring a GroupEffect, e.g. `@groupeffect`:
- inside this new at-rule other rules can be nested
- the selector part for each of these rules is a name/list of names of predefined `@keyframes` rules
- the declarations of these rules are timing options for a child effect of this group
- the `animation-group`'s `name` of these animations is of course given from the parent at-rule
- the `order` of each child animation defined by order of appearance

Here's a rough example of how the syntax will look like for declaring a reusable GroupEffect:

```css
@keyframes slide {
  ...
}

@keyframes jump {
  ...
}

@keyframes recolor {
  ...
}

@groupeffect crazy {
  slide {
    duration: 1.2s;
    easing: ease-in;
  }
  
  jump {
    duration: 0.8s;
    easing: ease-out;
  }
  
  recolor {
    duration: 1s;
    easing: linear;
    delay: -1s;
  }
}

#target {
  group-effect: crazy 2s sequence;
}
```

I think if we combine this proposal and the one above we can get both the bottom-up and top-down options managed.

I'm not sure that using same property for both applying an effect and scoping nested child animations is a good idea, but the values for these are similar, so I'm not sure how to solve that part yet.

WDYT?

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


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

Received on Thursday, 25 January 2024 19:06:30 UTC