At Last! Simple details/summary animation with pure CSS
If you’ve ever used a details/summary, you’ve definitely wished there was an easy way to animate them opening and closing. Well, thanks to to modern CSS, this is becoming possible! And while browser support isn’t perfect for a lot of this, it’s the perfect example of a progressive enhancement.
🔗 Links
✅ Check out Zoran’s version on his CSS Weekly channel:
✅ Interpolate size browser support:
✅ ::details-content browser support:
✅ I’ve got free and premium courses:
⌚ Timestamps
00:00 - Introduction
00:17 - The HTML and basic styling
02:40 - Adding interpolate-size: allow-keywords
03:55 - Enable shadow DOM in ...
#KevinPowell #Kevin_Powell #css #front-end #frontend #html #web_development #css_tutorial #tutorial #details
20241030
Vzj3jSUbMtI