Menu

Chris’ Corner: Little Bits of CSS
📰

Chris’ Corner: Little Bits of CSS

CodePen·@HashtagPLUS·6 months ago
#AmfLRo1i
#transition#docs#view#animated#typed
Reading 0:00
15s threshold

Adam Argyle is clear with some 2025 CSS advice:

I think every front-end developer should know how to enable page transitions , transition a <dialog> , popover , and <details> , animate light n’ dark gradient text , type safe their CSS system, and add springy easing to animation.

Nobody asked me, but if I had to pick a favorite of Adam’s six, it’s all the stuff about animating <dialog> , popover, and <details> . There is a lot of interesting new-ish CSS stuff in there that will help you all around, between allow-discrete , overlay , ::backdrop , :popover-open , @starting-style , and more.

/* enable transitions, allow-discrete, define timing */ [popover] , dialog , ::backdrop { transition : display 1s allow-discrete, overlay 1s allow-discrete, opacity 1s ; opacity : 0 ; }

/* ON STAGE */ :popover-open , :popover-open ::backdrop , [open] , [open] ::backdrop { opacity : 1 ; }

/* OFF STAGE */ /* starting-style for pre-positioning (enter stage from here) */ @starting-style { :popover-open , :popover-open…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.