- From: Yehonatan Daniv via GitHub <sysbot+gh@w3.org>
- Date: Thu, 02 Nov 2023 14:43:27 +0000
- To: public-css-archive@w3.org
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