Skip to content

[css-animations] Define animation-behavior (counterpart to transition-behavior) #10469

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LeaVerou opened this issue Jun 19, 2024 · 6 comments

Comments

@LeaVerou
Copy link
Member

I recently noticed that while we’ve added transition-behavior to css-transitions, there is no animation-behavior counterpart.

Is this by design? I don’t see any conceptual reason why we wouldn’t. I think transition-behavior is an excellent place for the various flags needed about how interpolation happens, and just proposed using it to define the interpolation color space as well. But this would require adding animation-behavior as well (even if its values don’t support allow-discrete, though I don’t see why they wouldn’t).

@birtles
Copy link
Contributor

birtles commented Jun 19, 2024

Yes, CSS animations always allowed animating discrete properties. Transitions historically did not, hence why transition-behavior was introduced for transitions only.

As I mentioned in #7063, one of the difficulties of introducing a property to define the color interpolation space for CSS animations is it still leaves open the issue of how to define the same for animations generated directly via the Web Animations API. Either that property needs to map to something we define in the API or we should define a general property that applies to all animations/transitions on the element.

@LeaVerou
Copy link
Member Author

Yes, CSS animations always allowed animating discrete properties.

Not always :) It was a resolution we made in 2012.


I would really like to avoid adding yet another property for this and find a mechanism for providing property-specific or value-specific params to transitions/animations. It seems there is precedent with transition-behavior, so we should just adopt that. If allow-discrete is default for animations, it could be part of its initial value, or simply not included at all.

Web Animations can just define a behavior option that takes the same values, no?

@birtles
Copy link
Contributor

birtles commented Jun 22, 2024

Yes, CSS animations always allowed animating discrete properties.

Not always :) It was a resolution we made in 2012.

Oh, I didn't know that!

The point is that because transition-property's initial value is all, we couldn't allow transitions to start animating discrete properties without introducing Web compat issues, hence the explicit opt-in. Animations, which explicitly list the properties to be animated don't have that issue (except in the case of shorthands where the impact is less).

I would really like to avoid adding yet another property for this and find a mechanism for providing property-specific or value-specific params to transitions/animations. It seems there is precedent with transition-behavior, so we should just adopt that. If allow-discrete is default for animations, it could be part of its initial value, or simply not included at all.

Web Animations can just define a behavior option that takes the same values, no?

Yes, absolutely, that's one route for sure.

If there's never a need for different animations on the same element to interpolate in different color spaces, another route would be something like SVG's color-interpolation and color-interpolation-filter properties that would cover all animations on a given element, regardless of the API used to create them.

I'm a little less averse to introducing another property for this if that property were to cover all possible future interpolation parameters. "behavior" is a poor name, unfortunately, and I think it would be nice to avoid adding that to the JS API / CSS animations if we can help it.

@svgeesus
Copy link
Contributor

If there's never a need for different animations on the same element to interpolate in different color spaces,

There is, though. I'm familiar with SVG color-interpolation and color-interpolation-filter properties, of course, and building on these was considered but rejected as insufficient for that reason.

@LeaVerou
Copy link
Member Author

LeaVerou commented Jun 23, 2024

I'm a little less averse to introducing another property for this if that property were to cover all possible future interpolation parameters.

That is exactly what is being proposed.

"behavior" is a poor name, unfortunately, and I think it would be nice to avoid adding that to the JS API / CSS animations if we can help it.

That ship has sailed though, transition-behavior is already in use. I don’t think the name is so bad that it warrants adding yet another property for the sole reason of improving it.

@birtles
Copy link
Contributor

birtles commented Jun 24, 2024

If there's never a need for different animations on the same element to interpolate in different color spaces,

There is, though. I'm familiar with SVG color-interpolation and color-interpolation-filter properties, of course, and building on these was considered but rejected as insufficient for that reason.

Yes, of course you are! That's fine, I'm just not familiar with where that was rejected so I wanted to check where we were up to.

I had a think about this proposal, but rather that spread comments across two issues, allow me to reply to in issue #7063.

Update: Commented here to say I don't think we should introduce animation-behavior.

@fantasai fantasai removed the css-animations-1 Current Work label Sep 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants