Transitions on specified discrete properties

[josepharhar]

こんにちは 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): [css-transitions-2] Start transitions on discrete animation types w3c/csswg-drafts#4441 (comment)
• Specification URL:
  • [css-transitions-1] Make discrete properties transition at 50%; exclude them from 'all'. #4441 w3c/csswg-drafts#8520
  • https://drafts.csswg.org/css-transitions-2/#transition-name-property
• Tests:
  • https://wpt.fyi/results/css/css-transitions/all-with-discrete.tentative.html
  • CSSTransitionDiscrete: Fix overflow related crashes web-platform-tests/wpt#38860
  • CSSTransitionDiscrete: Fix align related crashes web-platform-tests/wpt#38815
  • CSSTransitionDiscrete: Fix counter related crashes web-platform-tests/wpt#38817
  • CSSTransitionDiscrete: Fix background-repeat related crashes web-platform-tests/wpt#38816
  • CSSTransitionDiscrete: Fix text-decor related crashes web-platform-tests/wpt#38997
• 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: [css-transitions-2] Start transitions on discrete animation types w3c/csswg-drafts#4441
• External status/issue trackers for this specification (publicly visible, e.g. Chrome Status): https://chromestatus.com/feature/5071230636392448

Further details:

• 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]

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]

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]

This feature is now handled by #829