We can now transition to and from display: none

Start writing CSS with confidence 👉 cssdemystified.com/?...
🔗 Links
✅ Great article from Chrome for Developers blog on this : developer.chrome.com/blog/ent...
✅ Open Web Docs: 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - 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 CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: 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!

[@MaksymCzech]

Finally, it took only 20 years 😂😂

[@royhyde8842]

Hhahahahhha Riiiiight!!!!

[@jugibur2117]

28 years, to be exact 😁

[@GyroCannon]

For people targeting Firefox, it’ll take another year, apparently

[@chezchezchezchez]

And if you were running the show, you would’ve had it done in two years? Give me a break, dude.

[@saintpumpkin]

since display property had no numeric value it was supposed not to translate

[@farhan-app]

"We have display transitions before GTA 6"

[@mubrik_]

Wow, I never thought this day would come

[@Yous0147]

It's pretty incredible how almost every difficulty I find in CSS gets addressed by your videos handedly. Awesome stuff

[@codeslacker77]

Wow, finally~!!! The days of width/heigh/margin/paddingt: 0px; opacity:0; pointer-event:none; finally comes to an end

[@nitsanbh]

Also tabIndex="-1" and overflow: hidden

[@codeslacker77]

@@nitsanbh Yes, this one too.

[@you_cant_see_me_3000]

Today is a good day! I felt it in my bones when I woke up this morning!

[@joshcool]

I've been waiting for this for YEARS lol so happy about this!

[@christian-schubert]

Jebus, Web Dev has gotten so easy these days!
SO glad we've got all these Frameworks that overcomplicate matters again

[@paxdriver]

Lmfao, well, to be fair I used to be able to teach every single possible style attribute and value in a month and have them all memorized. Now I can't do half of css without gpt or the docs because everything has a specific name and specific limits (like vh not accounting for mobile browser address bars, or justify content vs justify item).
This is harder than it's ever been, but we've never had so much broadband internet, search and LLM tools to help navigate it on the fly.
We dev used to be way way easier though, we could build websites in notepad without a linter or IDE. No joke I did it for like 6 years in notepad.

[@TheWhoreDetector]

@@paxdriveras someone starting coding / programming I agree, of course the more I do it gets easier but it should be more simplified imo

[@intsfanatic]

But we still cant transition to height auto...

[@Killyspudful]

There's an upcoming CSS value which will allow that -. height: calc-size(auto);, for example. Under development in Chrome, I believe.

[@duruiz]

unfortunately :(
but we can do a css only solution with grid :)

[@mur9a]

The amount of animation that are going to be made in the next 2 hours by me is going to be ungodly

[@benjen5518]

😅😅

[@pinkseacow6067]

Allways great Videos you make! Happy to have you💙

[@LePhenixGD]

This is amazing! I've been waiting for years for this feature to come, can't wait for browser support to be good enough for me to start using it!

[@WillHuizenga]

Looking forward to playing with this tomorrow
Very glad I watched to the end. That last bit of information will be very useful.

[@albedesigns]

I truly appreciate your videos. They've helped me so much! ❤

[@luc122c]

Thank you so much. I needed to do this today! I really appreciate you taking the time to cover the details and the caveats.

[@heyyounotyouyou3761]

Thank you so much css devs, really needed this so bad. Had to use settimout and it was killing me everytime I wrote it

[@graysonpeddie]

Yeah, and I don't want to use JavaScript in my website if I don't want to and my website does not use it at all! Only HTML and CSS! :D

[@heyyounotyouyou3761]

@@graysonpeddie that's plane wierd. Static websites are a thing of the past

[@TheWhoreDetector]

@@heyyounotyouyou3761nothing wrong with static websites 😊

[@samurai1122]

Great news. I was waiting for this and I have a few drop-down elements with display none :)

[@kolsark422]

this looks clean af to use, thx a lot Kevin ! Can't wait for it be better supported

[@brankoh]

Finally!!!! Thanks for the heads up.
As always, great video! That's why you are one of my sources of info when I need to update coding knowledge.

[@robomalo]

Crazy timing. I legit just found this two days ago for changing content visibility.

[@samraavana]

My first video was on 223k, now looks how much it grows. Because of you life is becoming easier and easier thank you.

[@keenanflogerzi5218]

Thanks for the explainer on discrete animations, and the “allow-discrete” transition-behavior.
I saw another video mention that property but I didn’t understand because it didn’t explain what that is or how it works. Thanks for yet another excellent video!

[@arthuradriansens3291]

You just made my day, thx!! Finally

[@GilGoldshlager]

THIS IS THE BIGGEST NEWS IN CSS EVER!!! 😲 I'm still shaking! can't believe this is real! thank you so much 💗🙏

[@alanbloom20]

Really well constructed way to explain through this concept. I’d say that it’s one of the trickiest concepts I’ve had to deal with and you’ve revealed some quirks about this process that reveal why some things weren’t working in the past. Thank you :-)

[@seba-aranda]

great video! Thanks for taking the time in explaining the little details, those were really usefull 🙏. I was looking for this kind of explanation because I knew this was new, but after some tries I was not being able to animate the display property 😆, now I can 😎.

[@itlackey1920]

Great explanation, and very helpful as always. Thank you!

[@akramilyas6030]

yaaaaaay now this and page transition , anchor position , container query we will be happy

[@AnkitTannaVlogs]

The way Kevin explains complex concepts ❤❤❤

[@Jumanji_Dev]

Finally Maahn 🎉🎉 🕺

[@_hepl]

Oh gosh! Thanks, finally!

[@ericdimarzio5756]

Love the content, Kevin! Wanted to let you know there’s an ad break right in the middle of the plug you make for your course. Probably not good for click-thru’s. Your content is amazing and needs to reach as many people as possible. 😊

[@Pukmeister0]

Holy hell, thank you so much for this

[@Linuxdirk]

I instantly know some of my sites that could use this and where it would make things 100% easier! 👍

[@koreappinesmusic]

Love your Content, Thank you.

[@deadlyecho]

Wow that is so powerfull and will make things alot easier

[@RichardCalder67]

Watching the Can I Use part all of a sudden reminded me of having to have a work around for border radius lol.

[@jfftck]

So to have the animation in all browsers, it would take a little JavaScript to listen for the animationend event and would also mean that transitions wouldn’t work still. This is how it’s been done before these properties, so you could still support this and use the supports method of CSS in JavaScript to disable if the new properties are supported, this has a benefit of being able to track the percentage of browsers that require JavaScript to work and this doesn’t need any additional analytics tool to do that. You could send the information back to the server and compare to the number of hits the other endpoints receive to get a rough estimate for your site.

[@LouisCharlesBlais]

What a time to be alive ✨

[@paxdriver]

For the record, it is faster to learn javascript and do anything you can imagine vs learning css and spending a lifetime learning new, old, cheat-cut rules that javascript solved decades ago.
I love this channel, I use css every day, but javascript took a couple years to learn while I'm always trying to catch up to css to do things I could already do in js.
The reason why it's important to keep up with css is gpu acceleration, react, and it's just plain fun. But seriously, for people who avoid javascript because it's hard to learn or complicated, if you can learn css you'll be a beast at javascript. Being able to do both makes you an expert with no limits but imagination.

[@tonyvito5062]

Finally that's really useful

[@raphaelgoetter]

Are you sure `transition-property: opacity display;` is working? Values shoud be comma separated

[@artursavchuk2363]

thanks, this information is very useful

[@nothappyz]

Thank you css daddy 😭

[@Horse-tradeEu]

The keyframes method which is basically the only one working cross-browser, requires backdrop set to none. 1. That removes the focus that is required for the animation but defeats the whole accessibility purpose. Also then 2. you need to set your event to window if you want the modal to disappear when you click the backdrop. 3. Of course the easy customization of the backdrop color. I liked the video cause I am big fan of Kevin but unfortunately as exciting as it looks, we need better support on this. It's a nice feature.

[@spikeganush]

Great video, as usual.
I think in transition-property each property needs to be separated by a coma!
transition-property: display, opacity, overlay;

[@MattDawkins-gh6gi]

Interesting. Though I'm not sold on the logic behind "transitioning" the display property. It's more like controlling the timing of when that discrete property applies, there's no in-between state. Personally, in this example, I'd probably just use `opacity: 0` to make the popup invisible and `pointer-events: none` to ensure it can't be interacted with when it's invisible. But that @starting-style looks like it could have lots of uses! Thanks for sharing.

[@jonmayer]

About flippin' time!

[@akash-kumar737]

I can't tell how much I need it. Must needed to animate modal.

[@lronmate]

Miracles do happen 😮

[@xaddict]

transition-property is officially supposed to be a comma-separated list, that's why the devtools were saying it's wrong.

[@JohnFarrellDev]

Whoooa, bought in framer motion to achieve this for a big project before.

[@nazmulalok9404]

So glad to see this, But I am wondering how can I use in a faq using details & summary, Thank you so much Kevin.

[@ajxtc2]

You can use pointer-events:none on overlaying invisible modal and transition from there

[@ennioVisco]

Thanks a lot Kevin! Now that you mentioned it btw, what about a video on the gotchas between css nesting and sass? I remember you did one in the early days, but the spec became a little more permissive since then

[@RickBeacham]

Thanks!

[@KevinPowell]

Thank you!

[@RonaldGrootJebbink]

Finally! Also great background news with how it works. I have a question about multiple dialogs. Do you know if it is possible to only use one ::backdrop with a color instead of all. I want the functionality to open two dialogs at the same time, but because the ::backdrop is stacking, the website beneath is getting more and more darker. Just curious if you know what I mean and if you have a creative solution to this :).

[@mistabuzz5485]

Now I know how framer motion works. Seems like I can get a lot more control doing in this way though.

[@n-0-1]

Now we need a transition between justify/align content/items start/center/end.

[@Ray-es1r]

CSS must be the most ill conceived visual/styling language, and I use the term loosely, in popular use today. You'd think W3C at some point would start work on a clean slate approach rather than retrofit every useful feature into CSS. "if you do this you have to remember that but avoid that and this will work in this direction unless you do that in which case you need to do it the other way you can do it but that doesn't work in that other case".

[@jugibur2117]

Thanks for this introduction! Although my old head is already pretty full with all the commands and rules... not only for CSS 🤭

[@benson6158]

Oh this is new?
I’m just getting into really learning web development (I come from RF test automation) and used this in my first little project. Assumed it was just the normal way to do this.

[@Daniel_H01]

thats awesome.

[@Jeckwilke]

finally!!!!!!!!!!!!

[@MrEnvisioner]

20:20 Maybe not worth it for just one property and a simple 'dialog[open]' selector, BUT it should still be possible to use nesting for the @starting-style if you segregate the pseudo-element reference using the combine '&' operator for both cases. That way, you can independently maintain the selector for the parent context, like this:
dialog[open] {
&::backdrop {
opacity: .75;
}
@starting-style {
&::backdrop {
opacity: 1;
}
}
}

[@C0playeR]

Finallyyyy

[@gilsonconceicao5201]

Thanks

[@MaxWeir]

Perfect timing, we recently converted to dialogue for all our modals, this will be a nice upgrade 🙂
I was asked by our lead dev to convert our off-canvas to a dialogue as well, I however think this is not the appropriate use case and may cause some usability issues?
AlsoI noticed your link in the desc. isn't formatted correctly - the query string isn't part of the link anymore.

[@legostud]

Key frames are also global so be careful what you call them to prevent accidental overrides.

[@lukasmolcic5143]

One thing you can do if you want this effect to work in all browsers without using .js would be to not use display none at all, but just keep the opacity animation for animating back and forth, but then also add ponter-events: none to the hidden state so that it doesn't block any mouse events going over it.

[@starmechlx]

I've never clicked on a thumbnail so fast

[@lucascubile7141]

Nice they starting to add stuff like this but I wouldn't implement it yet for compatibility stuff.

[@kill_switch_101]

tnx a lot

[@Xamy-]

Ayooo finally

[@hitmusicworldwide]

Claude Opus just did this for me to create luminous slide up price cards last week

[@Say_whaaaaat]

Getting ready for a bunch of fade in sites now

[@MrHerbalite]

🎉❤awesome🎉❤🎉

[@ajiteshmishra0005]

Could you please create one video explaining full Tailwind CSS and also comparison of CSS with Tailwind CSS???

[@luichyluichy]

I hate having to wait for new features like this hahaha

[@deatho0ne587]

Really wish legacy code bases could use this and modal/pop-up from the newer HTML stuff.

[@graysonpeddie]

starting-style... Hopefully Firefox will support that in the future. Firefox seems already behind compared to Chromium-based browsers...

[@tim-pn2fq]

At 13:10, can somebody tell me why translate is animating even though we are only specifying transition-property display and opacity?

[@tim-pn2fq]

Edit: it looks like transition-property takes a comma separated list, and has an initial value of 'all'

[@stefanjudis]

@@tim-pn2fq I was wondering the same. Thanks for digging this up. :)

[@typicalyorkshirebloke]

If I was trying to implement this into a typical navbar then, where clicking the hamburger icon shows or hides the links in the navbar, would this still work this way? Instead of opening with one element and having to click another element to hide it again. Appreciate the videos always!

[@titusayyasamy3035]

Dialog with transition, good. but you forgot to show us button onclick method by the way 🙂

[@Jedediahiah]

Great video as always! Curious as to why the translate: 0 -25vh; animates without being specified as a transition-property?

[@backup_hdd]

wait, why does translate animate despite not being mentioned in transition-property? and what, you can define transition-properties without a comma in between? :o

[@l1f3l3s2]

Can you make a roadmap of your videos/playlist to learn CSS?

[@user-gi3oc1kv5m]

Super cool! How does this affect accessibility? 👀

[@dealloc]

My thinking is that this was pushed until dialog spec was done (it was a proposal since at least as early as 2011). Simply because dialog _relies_ on display property for its visible state, rather than opacity/visibility , which would prevent interaction with underlying elements.

[@epictechshorts]

Big fan ❤❤❤

[@XCanG]

Will it work in this case?
dialog {
...
&[open] {
...
&::backdrop { ... }
@starting-style { /* dialog starting styles */ }
@starting-style &::backdrop { /* dialog backdrop styles */ }
}
&::backdrop { ... }
}

[@ebenezerowusu1680]

My best teacher 🔥🤩🥳

[@coffeemakir1977]

If they fix margin-top my bucket list will be complete

[@antonio_carvalho]

This is exactly what I needed, but it isn't animating when I close() a dialog on Safari (v 17.5), not even in the example on the "transition-behavior" website on MDN.

[@backup_hdd]

ah yes, "yes", my favorite animation type

[@marksyzm]

I used to use delay of N seconds and a 0 second animation on the display property to get around this. I guess this method is somewhat more straightforward but the starting-style syntax looks a bit awkward. I’m sure I’ll get over it.

[@marksyzm]

Nice to have a simple version of from…to like in the animation key frame syntax though with “starting-style”!

[@pascalmaranus]

So wouldn't you have been able to add a nested &::backdrop within the previously set @starting-style?

[@dj10schannel]

Hmmm 🤔 never thought this would be added lol

[@Bilo_7]

Ou ou ou. Memories are flashing in front of me. Back then when i almost cried from frustration because of the sucking transition for display none 😂

[@lucadetomi9269]

Please, how to combine this technique with your solution for accordions made using grid-layouts and transitioning from 0fr to 1fr?