Intent to prototype: start transitions on discrete animation types
Boris Chiou
Summary: Per the result of this spec issue, csswg#4441, we would like to start the CSS transitions on CSS properties with discrete animation types. The new definition of transitionable is:
property values are transitionable unless they have an animation type that is not animatable.
Values with a discrete animation type are transitionable,
and flip at 50% progress (p = 0.5).
However, the "all" keyword continues to expand only to all transitionable properties whose animation type is not discrete.
Note that, even if the animation type is by computed value, but its interpolation falls back to discrete (e.g. from "10px" to "auto"), we also treat it as a discrete animation case, and so we still start a transition for it, if the user specifies this CSS property in "transition-property".
Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1805727
Specification: https://drafts.csswg.org/css-transitions-2/#transition-property-property
Standards Body: CSSWG
Platform coverage: all
Preference: "layout.css.transition-discrete.enabled". Will enable it on Nightly for now, so wpt.fyi can show its result for interop-2023, and it makes us easier to catch issues on try server.
DevTools bug: No needed
Link to standards-positions discussion: https://github.com/mozilla/standards-positions/issues/763
Other browsers:
- Blink: Implemented this already. Not shipped. https://bugs.chromium.org/p/chromium/issues/detail?id=1399631
- WebKit: Not shipped or implemented. I didn't see any related WebKit bug for now. Only standards-positions: https://github.com/WebKit/standards-positions/issues/148
web-platform-tests: Basically, every spec with animation tests should includes CSS transitions and these tests should test this feature already (e.g. the flex-box test uses "test_no_interpolation()" to test if two values are not interpolated and so the property value flips at 50%, for both transitions and animations). And perhaps this one: css/css-transitions/all-with-discrete.tentative.html is the most relevant one.
Thanks.