search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.46k stars 657 forks source link

[css-animations] [css-transitions] Allow authors to control the time threshold for properties with a discrete animation type #9409

Open rthrejheytjyrtj545 opened 1 year ago

rthrejheytjyrtj545 commented 1 year ago

It would be useful to give authors the ability to apply magic of a properties, such as content, display, content-visibility, visibility & overlay, on arbitrary properties; and make it more flexible. Something like transition-step, which accepts a list of single values from percentage, start, middle, end & auto.

I know these days this is solved by playing with keyframes or transition durations / delays, but there is a reason why certain properties have special rules, so having a common primitive for something like this would be quite helpful.

Use cases could be disabling at the start of hiding / enabling at the end of showing interactions, for example through user-select, pointer-events, touch-action, resize, overflow, overscroll-behavior & scrollbar-width; or custom properties, the values of which trigger style containers.

It might also be worth considering forcing a discrete animation type, on demand, as an aid to development for users with reduced motion needs. So that the intended property will set it for the affected properties, with the option to revert to the previous behavior via the initial normal value.

Loirooriol commented 1 year ago

Why not do it with an easing function? If you want to e.g. change at 25%, use linear(0, 0.5 25%, 1), or step-start to change at the very beginning, etc.

rthrejheytjyrtj545 commented 1 year ago

In animations, the ease function is set for the entire animation. And specifying additional animations only for use in conjunction adds unnecessary complexity to the code and increases the likelihood of errors.

The same thing applies to transitions. There is no way to set the ease function only for a group of discrete properties, except by listing all the properties involved in the transition and setting for each of its values, which causes a lot of duplication, since authors usually use all together with a single ease function.

ydaniv commented 5 months ago

@rthrejheytjyrtj545:

In animations, the ease function is set for the entire animation. And specifying additional animations only for use in conjunction adds unnecessary complexity to the code and increases the likelihood of errors.

actually no, in CSS the timing-function is applied per keyframe, see #6982. Only on Web Animations you can set easing per entire iteration.

The same thing applies to transitions. There is no way to set the ease function only for a group of discrete properties, except by listing all the properties involved in the transition and setting for each of its values, which causes a lot of duplication, since authors usually use all together with a single ease function.

I disagree on that. This is exactly the reason we have the ability to set multiple transitions, so that you can configure it per property. You can also start with a default for all and then override later in the list.

Nevertheless, I think the OP might be useful. Can you give example demos (codepen/jsbin/etc) of concrete use-cases?