Animatable CSS properties missing list of Animatable CSS properties

[Gitoffthelawn]

MDN URL

https://developer.mozilla.org/docs/Web/CSS/CSS_animated_properties

What specific section or headline is this issue about?

Animatable CSS properties

What information was incorrect, unhelpful, or incomplete?

This page previously contained, as its title specifies, a list of links to all animatable CSS properties. That essential list is now missing, rendering this page much less useful.

What did you expect to see?

A list of links to all animatable CSS properties.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

Can the list of links to all animatable CSS properties please be restored?

MDN metadata

Page report details

* Folder: `en-us/web/css/css_animated_properties` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/css_animated_properties/index.md * Last commit: https://github.com/mdn/content/commit/856b52f634b889084869d2ee0b8bb62c084be04d * Document last modified: 2023-07-17T22:37:27.000Z

[wbamberg]

This is a duplicate of https://github.com/mdn/content/issues/27042, in which the reasoning for removing the list was given. What is your use case for this list, that isn't met by the formal definition table in the property reference page (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#formal_definition), which indicates how the property is animatable?

[Gitoffthelawn]

...What is your use case for this list, that isn't met by the formal definition table in the property reference page (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#formal_definition), which indicates how the property is animatable?

When I'm writing new code, debugging my code, or debugging the code of others, a quick reference table is much more useful than having to look up each property.

For example, let's say I want to hide an HTML element. There are many different CSS properties that can be used to accomplish this task (depending on the context). But if one wants to slowly hide an element, the CSS property must be animatable.

With how MDN was written until recently, I could simply go to the above-referenced page and quickly verify which CSS properties are animatable. This took just a couple seconds and minimal energy.

Now that this table has been removed from MDN, I must open a slew of browser tabs (one for each property that I may want to use), manually scroll to the correct position in each tab to find the correct section (or manually search for an identifying string), and then find the same data that previously was clearly presented in a nice and tidy table. After laboriously finding the information, I must now close all those browser tabs (and not accidentally close any other browser tabs).

What previously could be accomplished via a single pointer movement followed by a single toolbar button click now takes more than 20 clicks, scroll actions, and pointer movements. That's a 2000%+ increase. And what previously involved almost zero chance of error, now introduces some error.

I hope this example helps illustrate the benefits of quick reference tables.

[Vallek]

@Gitoffthelawn hey in case you didn't see it at https://github.com/mdn/content/issues/27042 i made a list from specs vallek.github.io/animatable-css/

[Gitoffthelawn]

@Vallek Thank you ❤️

[yarusome]

@Gitoffthelawn FWIW, CSS properties that can exhibit slow or whatever gradual animations should not only be animatable, but its animation type should also not be discrete. This common fallacy counts as another reason why the original list was not as useful as it seemed.

@wbamberg Do you think a WebRef-/openwebdocs/project#174-based macro/bot that lists CSS properties by animation types would help?

[wbamberg]

Sorry to have not got back to you before about this, @Gitoffthelawn . I did read your use case and discussed it a bit internally.

What previously could be accomplished via a single pointer movement followed by a single toolbar button click now takes more than 20 clicks, scroll actions, and pointer movements. That's a 2000%+ increase.

Perhaps I'm not understanding this, but assuming you're checking multiple properties (20 I suppose?) I'm not sure how you could find 20 items in https://web.archive.org/web/20220325145740/https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties with "a single pointer movement followed by a single toolbar button click".

manually scroll to the correct position in each tab to find the correct section (or manually search for an identifying string)

This isn't needed. Animation support is always in the "Formal definition" table, which is accessible by one click from the table of contents.

Also, I'm not sure how often it will actually come up that you have to check the animation status of 20 properties, all in one go. Finally, as @yarusome says, the list wouldn't have given you reliable answers anyway, as the type of animation is also relevant. So you would have needed to double-check the property page anyway.

@wbamberg Do you think a WebRef-/openwebdocs/project#174-based macro/bot that lists CSS properties by animation types would help?

Certainly this seems like an argument for including animation type in there. It is present in webref.

[wbamberg]

That said, while I'm not wildly enthusiastic about macros that are very specific to a single page, I'm not totally against them either, if they deliver real value to readers. @yarusome , as you've said, almost all properties are animatable, so it would make more sense to list non-animatable ones, and we could repurpose https://github.com/mdn/yari/blob/main/kumascript/macros/CSSAnimatedProperties.ejs to be {{CSSNonAnimatableProperties}}, I suppose.

[Gitoffthelawn]

@wbamberg I am in receipt of your replies, thank you. I skimmed them quickly, but as I'm very busy right now, I will need to leave your replies in my queue for response when I can give them the thought and attention they deserve. In the event that my response is delayed for longer than meets your needs, feel free to ping me, and I'll adjust queue position accordingly. Thanks.