Transitions on specified discrete properties

josepharhar commented 1 year ago

こんにちは TAG-さん!

I'm requesting a TAG review of Transitions on specified discrete properties.

Allows transitions of discrete properties to be started on properties explicitly listed in the transition-property list. These transitions run using the same logic as an animation on those properties performing a flip at 50% by default but can be customized through the use of the transitionstart event and web-animations-1 APIs for modifying transition animations.

Explainer¹ (minimally containing user needs and example code): https://github.com/w3c/csswg-drafts/issues/4441#issuecomment-1329749962
Specification URL:
- https://github.com/w3c/csswg-drafts/pull/8520
- https://drafts.csswg.org/css-transitions-2/#transition-name-property
Tests:
User research: none
Security and Privacy self-review²: none, I believe this animations feature has no security/privacy implications.
GitHub repo (if you prefer feedback filed there): none
Primary contacts (and their relationship to the specification):
- Joey Arhar @josepharhar Google
- Robert Flack @flackr Google
Organization(s)/project(s) driving the specification: Google
Key pieces of existing multi-stakeholder review or discussion of this specification: https://github.com/w3c/csswg-drafts/issues/4441
External status/issue trackers for this specification (publicly visible, e.g. Chrome Status): https://chromestatus.com/feature/5071230636392448

Further details:

[x] I have reviewed the TAG's Web Platform Design Principles
Relevant time constraints or deadlines: We are trying to ship this in Chrome 114 which branches on April 20th and goes to stable on May 30th
The group where the work on this specification is currently being done: CSSWG
The group where standardization of this work is intended to be done (if current group is a community group or other incubation venue): CSSWG
Major unresolved issues with or opposition to this specification: none
This work is being funded by: Google

We'd prefer the TAG provide feedback as (please delete all but the desired option):

💬 leave review feedback as a comment in this issue and @-notify [github usernames]

LeaVerou commented 1 year ago

Hi there, we noticed an explainer is missing. Could you please update the request with an explainer? You may find the Explainer Explainer helpful.

josepharhar commented 1 year ago

Here is an explainer which explains the motivation for discrete property animation in context with other features, it is the first item in the list: https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md

The CSSWG issue doesn't provide a very concise example, so here is one:

#target {
  transition: font-family 1s, color 1s;
  font-family: serif;
  color: blue;
}
#target.animated {
  font-family: sans-serif;
  color: green;
}

Without this feature, font-family will always transition immediately as soon as animated is applied to #target. With this feature, the font-family value will switch halfway through the transition and can also be precisely controlled with a @keyframes rule.

josepharhar commented 1 year ago

This feature is now handled by https://github.com/w3ctag/design-reviews/issues/829

w3ctag / design-reviews

Transitions on specified discrete properties #825