Intent to prototype: start transitions on discrete animation types

206 views
Skip to first unread message

Boris Chiou

unread,
Apr 19, 2023, 5:03:12 PM4/19/23
to dev-pl...@mozilla.org

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:

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.

Boris Chiou

unread,
Sep 6, 2023, 3:51:52 PM9/6/23
to dev-pl...@mozilla.org
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

Thanks.
Reply all
Reply to author
Forward
0 new messages