Intent to prototype: start transitions on discrete animation types

Skip to first unread message

Boris Chiou

Apr 19, 2023, 5:03:12 PM4/19/23

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".

Standards Body: CSSWG
Platform coverage: all

Preference: "layout.css.transition-discrete.enabled". Will enable it on Nightly for now, so 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:

Other browsers:

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.


Boris Chiou

Sep 6, 2023, 3:51:52 PM9/6/23
The spec has been changed slightly. We will introduce a new CSS property, `transition-behavior`, and use this property to specify whether transitions will be started or not for discrete properties.

There are some updates in this intend-to-prototype:
Preference: "layout.css.transition-behavior.enabled".
web-platform-tests: Will be in the folder: testing/web-platform/tests/css/css-transitions

Reply all
Reply to author
0 new messages