80: Animating to and from top-layer

The CSS Podcast

Jun 13, 2024•31 min

--:--

Listen in podcast apps:

Listen to this episode in Metacast mobile app

Don't just listen to podcasts. Learn from them with transcripts, summaries, and chapters for every episode. Skim, search, and bookmark insights. Learn more

Episode description

In this episode Una and Adam continue talking about dialogs and popovers, but this time it's all about animating them into and out of the top layer.. We'll be introducing starting-style, a new mode for transitioning discrete properties, and the overlay property for smooth entry and exit animations.

Links:
top-layer CSS spec → https://goo.gle/4c2elUW
Four new CSS features for smooth entry and exit animations by Una → https://goo.gle/3KpyB7e
Using @starting-style and transition-behavior for enter and exit stage effects → https://goo.gle/452FG7p
Popover on MDN → https://goo.gle/453xfss
:popover-open on MDN → https://goo.gle/3x5XLVl
Dialog and popover animated → https://goo.gle/3Kn1Ck7
Popover animated with nesting → https://goo.gle/3wW3Qns
What is the top layer? → https://goo.gle/457rUjQ
overlay property on MDN → https://goo.gle/3yKNRsT
MDN demos → https://goo.gle/4c2eIyO

Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬

Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘

For the best experience, listen in Metacast app for iOS or Android

Open in Metacast