Here's a nice simple demo from Moritz Gießmann on animating the triangle of a <details> element, which is the affordance that tells people this

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

The tricks? Turn off the default triangle: details summary::-webkit-details-marker { display:none; } . You can’t animate that one. Make a replacement triangle with the CSS border trick and a pseudo element. Animate the new triangle when the state is open: details[open] > summary::before { transform: rotate(90deg); } .

How to Animate the Details Element