That is no longer true! You can do it in CSS with a combination of `@starting-style` and `transition-behavior: allow-discrete`. [1]

Another gotcha you'll run into is animating the height. A couple other new features (`interpolate-size: allow-keywords` and `::details-content`) will let you get around that. [2]

Modern CSS is awesome.

[1] https://developer.chrome.com/blog/entry-exit-animations

[2] https://nerdy.dev/open-and-close-transitions-for-the-details...

Animating accordions is almost always a bad idea because the content length can make it unbearable.

In general I find animations on the web overused and unnecessary

Does it need animating ?

> Animating the details element is tricky. By the spec, browsers don’t natively support transitions between display: none and display: block.

Very hot take; then don't animate them!

Animation in a UI is great - you draw the user's attention to a widget that changed because they might not necessarily notice it otherwise. This improves the UX.

With a details/summary, the animation is not needed and can only make a negative change to the UX. There is no positive change to the UX that animating the details/summary elements would bring. When it is opened it is obvious.

If you really really need to animate the details, instead of animating open/close, instead animate the summary background/text color to indicate that the element has just changed state.

Would I like easy animation of open/close? Sure. Does it improve the UX? Nope.

You can put a transition on details > summary.

> browsers don’t natively support transitions between display: none and display: block.

You say that like it's a bad thing.