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

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

== [css-animations-2] Declarative syntax for GroupEffects ==
This is a proposal for a declarative syntax of [Web Animations 2's GroupEffects](https://www.w3.org/TR/web-animations-2/#group-effect). The behavior of these suggested properties is already defined in Web Animations 2, and here I only suggest how to align it with CSS Animations.
This follows a proposal in a [comment on a previous issue](https://github.com/w3c/csswg-drafts/issues/8534#issuecomment-1752044866).

## Description:

Add a new property, name to be bike-shedded, like `group-effect`, to declare a group effect that can be later referenced in another new property, like `animation-group`, that takes a list of idents to add an animation to a group, and optionally an integer for the position in the group.

The `group-effect` can be just specified on a parent, which all `animation-group`'s just seek upwards on the tree.
The `group-effect` property can be a shorthand of all properties: `name`, `parent`, and rest of timing properties.
`name` can be a dashed/custom-ident.

An example usage could be something along the lines of:

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

#container {
  group-effect-TBB: --gorup-1 sequence 2.5s 0.5s linear 2;
}

#target {
  animation:
    slide 1s ease-out both,
    blink 1.5s ease-in-out infinite;
  animation-group: --group-1 1, --group-1 2;
}
```

Once the common parent with the `group-effect` is matched, that animation becomes active and starts its progress, and then the same goes for its children accordingly.

`group-effect` will be a shorthand of the following longhands:
* `group-effect-name`: `<dashed-ident>` - name of the group
* `group-effect-parent`: `<dashed-ident>` - optional name of the parent group
* Rest of [Effect Timing Options](https://www.w3.org/TR/web-animations-1/#dictdef-effecttiming)(+)
* A new longhand `group-effect-align`(++), explained below 👇 

### New property `group-effect-align`

This property will control synchronization of child effects inside the group.  The name of course is TBB.
It behaves same as [described here](https://www.w3.org/TR/web-animations-2/#sequence-effects), with the addition of splitting the parallel behavior of "GroupEffect" to `start` and `end`, which aligns the child effects to either start or end together respectively.
It has the following possible values:
* `start`: align all effects to start simultaneously.
* `end`: align all effects to end simultaneously.
* `sequence`: align each subsequent effect's start to the end of its preceding effect.
* `sequence-reverse`: same as `sequence` but with descending order, so each effect's start is aligned to its succeeding effect.

(+) Need to discuss adding `iterationStart` and `endDelay` to the syntax.
(++) Aligning `group-effect-align` with current spec of `GroupEffect` and `SequenceEffect` in Web Animations 2 will be discussed in a separate.

-------------

## Proposed syntax

### `animation-group`

```
animation-group-name: <dashed-ident>
animation-group-ordinal: <number>

animation-group: [<animation-group-name> <animation-group-ordinal>?]#
```

### `group-effect`

```
group-effect-name: <dashed-ident>
group-effect-parent: <dashed-ident>

group-effect-duration: ... // all effect timing options are 

group-effect-align: start | end | sequence | sequence-reverse

group-effect: [ <group-effect-name> [ / <group-effect-parent>]? [<group-effect-align> || ...]? ]# // ... for rest of timing properties
```

I probably did some syntax mistakes, but I think the gist of it is clear.

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


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

Received on Thursday, 2 November 2023 14:43:29 UTC