Start writing CSS with confidence 👉 https://cssdemystified.com?utm_campaign=general&utm_source=youtube&utm_medium=transitiondisplay

🔗 Links
✅ Great article from Chrome for Developers blog on this : https://developer.chrome.com/blog/entry-exit-animations
✅ Open Web Docs: https://openwebdocs.org/

⌚ Timestamps
00:00 - Introduction
00:40 - Using keyframes to animate the display property
04:45 - What you might try to get transition to work
05:58 - What is a discrete animation
08:13 - Open Web Docs
09:00 - Using transitions to go to and from display: none
10:55 - CSS Demystified
11:30 - Using @starting-style
12:30 - Easily have different transitions in each direction
13:52 - Browser support and progressive enhancements
16:12 - Make sure you include overlay for popups and dialogs
17:25 - The problem with peudo-elements, including ::backdrop

#css

--

Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrK

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell

---

My editor: VS Code - https://code.visualstudio.com/

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Kevin Powell

Learn how to transition from display: none to display: block using CSS animations and transitions. Discover the difference between animations and transitions and how to animate a backdrop in CSS.

We can now transition to and from display: none

Thank the CSS gods. I’ve needed this feature so many times over the years and it has always been such a tedious chore to implement in js every single time it’s needed.
No Firefox support (yet) is sort of a killer though. I guess I can use it in Electron apps at least, but hopefully Mozilla gets support in soon so I can fully ditch extra JS animations.

This has been a long time coming 😭. Like Container Queries was.

Waiting for it to get better support, but cool to know about

Thanks for the amazing feature tutorial.
CSS is improving…and it will keep on improving…

This is awesome bro 🫶
Would love to try it