- From: Robert Flack via GitHub <sysbot+gh@w3.org>
- Date: Wed, 10 Aug 2022 16:35:26 +0000
- To: public-css-archive@w3.org
flackr has just created a new issue for https://github.com/w3c/csswg-drafts:
== [web-animations-2] Web animations API for specifying timeline phases in animation options. ==
As part of #7044 we resolved:
* Add ability to specify start and end delays in terms of position in a named phase position (keyword + percentage), e.g. animation-delay: contain 0%; animation-duration: contain 100% attaches the animation between the 0% and 100% points in the contain phase. (See also https://github.com/w3c/csswg-drafts/issues/4342].)
* Add shorthand that expands a phase name to 0% start delay and 100% end delay. E.g. animation-phase: contain expands to animation-delay: contain 0%; animation-end-delay: contain 100%.
These resolutions specify how in CSS you can target an animation to a particular phase of the view timeline. However, we also need a way to do the same from the web animations API. In particular the options passed for the timing of web animations are [EffectTiming](https://www.w3.org/TR/web-animations-1/#dictdef-effecttiming) and [OptionalEffectTiming](https://www.w3.org/TR/web-animations-1/#dictdef-optionaleffecttiming).
Here are a few options I can think of:
1. The simplest would be to extend the `delay` and `endDelay` options to also accept a string specification equivalent to the CSS counterpart (e.g. `delay: "enter 20%"`).
2. Extend `delay` and `endDelay` to also accept an object type representing the combination of phase and time, e.g. `delay: {phase: "enter"}, offset: CSS.percentage(20)}`.
3. Add new options, e.g. `startTime` / `endTime` or `phase` for specifying the "phase", "time" pairs. We would then have to decide what to do when `delay` and `endDelay` are also specified.
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7589 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 10 August 2022 16:35:29 UTC