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.
It 's an excellent tutorial and very helpful video. Finaly we can use display none and add some transitions! You are the best with as well Web dev simplified for JS. I learned a lot from both of you!
I know your goal is to make people fall in love with CSS, so I wanted to let you know that you've managed to make at least one person, me, fall in love with it! I adore watching your videos and I actually fell in love with finding out new things I can do with CSS! Thank you!
Good news! As of testing today, it is working in all major browsers! It is working in Safari v17.6, Firefox v129.0.1, and Opera v65.0.3467.78 (It was already working in Chrome and Edge) Can I Use doesn't have Firefox 129 or Safari 17.6 listed yet though, but confirmed working! And it will be working for iOS when iOS 18 launches, which is most likely being released next month-ish
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!
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. 😊
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 😎.
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.
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.
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 :-)
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.
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; } } }
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.
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
Does something like this mean we will be able to create multi-level menus with just CSS and HTML without relying on JavaScript? Love your videos Kevin and I am learning a lot about modern CSS. Currently working it into my designs and finding it solves a lot of issues I have had in the past.
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.
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.
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.
How to do an Expanding animation for DISPLAY like the same as opacity? Like the `Display: none` element will show like a Stage curtain falls when it is given `Display: block` and vice versa
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 :).
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!
So, the translate animated, but it was not one of the transision-properties... or was I missing smomething? Off to try this out now, hope FF and Safari hurry up with this :D
When I do transition on visibility, from visibility: visible to visibility:hidden, the transition duration acts as delay, the state change happens after the duration time, but on the other hand, transitioning from visibility:hidden to visibility:visible happens immediately. How comes 😅
keyframes example doesn't work. I'm literally copying this one-to-one, and It just doesn't. Chrome, FF, Safari, all latest versions - it doesn't work. What's the trick here?
Seems like it wont work in a bunch of Browsers like Safari or Firefox when I take a look at caniuse and "allow-discrete" or "@starting-style". So we can finaly transition between display none and display block but we have to wait a long time until we can use it on production systems.
How can I apply that to the DETAILS tag once what is hidden automatically is everything that isn't SUMMARY? I mean, there is no css definition to them (at least from what I inspect in devTools)
Finally, it took only 20 years 😂😂
Hhahahahhha Riiiiight!!!!
28 years, to be exact 😁
For people targeting Firefox, it’ll take another year, apparently
And if you were running the show, you would’ve had it done in two years? Give me a break, dude.
since display property had no numeric value it was supposed not to translate
Wow, I never thought this day would come
It's pretty incredible how almost every difficulty I find in CSS gets addressed by your videos handedly. Awesome stuff
It really is amazing how difficult CSS manages to be considering it's goals.
Wow, finally~!!! The days of width/heigh/margin/paddingt: 0px; opacity:0; pointer-event:none; finally comes to an end
Also tabIndex="-1" and overflow: hidden
@@nitsanbh Yes, this one too.
The amount of animation that are going to be made in the next 2 hours by me is going to be ungodly
😅😅
Jebus, Web Dev has gotten so easy these days!
SO glad we've got all these Frameworks that overcomplicate matters again
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.
@@paxdriveras someone starting coding / programming I agree, of course the more I do it gets easier but it should be more simplified imo
But we still cant transition to height auto...
There's an upcoming CSS value which will allow that -. height: calc-size(auto);, for example. Under development in Chrome, I believe.
unfortunately :(
but we can do a css only solution with grid :)
height: calc(auto) works
Actually we can now
It 's an excellent tutorial and very helpful video. Finaly we can use display none and add some transitions! You are the best with as well Web dev simplified for JS. I learned a lot from both of you!
That took sooooo much time and research to find out you couldn't animate display...
And now it finally works 🎉
Looking forward to playing with this tomorrow
Very glad I watched to the end. That last bit of information will be very useful.
I know your goal is to make people fall in love with CSS, so I wanted to let you know that you've managed to make at least one person, me, fall in love with it! I adore watching your videos and I actually fell in love with finding out new things I can do with CSS! Thank you!
THIS IS THE BIGGEST NEWS IN CSS EVER!!! 😲 I'm still shaking! can't believe this is real! thank you so much 💗🙏
The way Kevin explains complex concepts ❤❤❤
Good news! As of testing today, it is working in all major browsers! It is working in Safari v17.6, Firefox v129.0.1, and Opera v65.0.3467.78 (It was already working in Chrome and Edge)
Can I Use doesn't have Firefox 129 or Safari 17.6 listed yet though, but confirmed working!
And it will be working for iOS when iOS 18 launches, which is most likely being released next month-ish
I've been waiting for this for YEARS lol so happy about this!
Watching the Can I Use part all of a sudden reminded me of having to have a work around for border radius lol.
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!
Thank you css daddy 😭
Crazy timing. I legit just found this two days ago for changing content visibility.
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!
Finally Maahn 🎉🎉 🕺
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. 😊
yaaaaaay now this and page transition , anchor position , container query we will be happy
Total game changer
Are you sure `transition-property: opacity display;` is working? Values shoud be comma separated
I instantly know some of my sites that could use this and where it would make things 100% easier! 👍
I can't tell how much I need it. Must needed to animate modal.
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.
Allways great Videos you make! Happy to have you💙
You can use pointer-events:none on overlaying invisible modal and transition from there
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 😎.
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.
Now I know how framer motion works. Seems like I can get a lot more control doing in this way though.
Thank you so much. I needed to do this today! I really appreciate you taking the time to cover the details and the caveats.
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.
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 :-)
this looks clean af to use, thx a lot Kevin ! Can't wait for it be better supported
What a time to be alive ✨
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.
Finally that's really useful
Great explanation, and very helpful as always. Thank you!
Thanks!
Thank you!
Nice they starting to add stuff like this but I wouldn't implement it yet for compatibility stuff.
I've never clicked on a thumbnail so fast
You just made my day, thx!! Finally
thanks, this information is very useful
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;
}
}
}
At 13:10, can somebody tell me why translate is animating even though we are only specifying transition-property display and opacity?
Edit: it looks like transition-property takes a comma separated list, and has an initial value of 'all'
@@tim-pn2fq I was wondering the same. Thanks for digging this up. :)
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.
Today is a good day! I felt it in my bones when I woke up this morning!
Getting ready for a bunch of fade in sites now
Whoooa, bought in framer motion to achieve this for a big project before.
Key frames are also global so be careful what you call them to prevent accidental overrides.
Holy hell, thank you so much for this
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
Wow that is so powerfull and will make things alot easier
Does something like this mean we will be able to create multi-level menus with just CSS and HTML without relying on JavaScript? Love your videos Kevin and I am learning a lot about modern CSS. Currently working it into my designs and finding it solves a lot of issues I have had in the past.
So glad to see this, But I am wondering how can I use in a faq using details & summary, Thank you so much Kevin.
If they fix margin-top my bucket list will be complete
starting-style... Hopefully Firefox will support that in the future. Firefox seems already behind compared to Chromium-based browsers...
Miracles do happen 😮
Claude Opus just did this for me to create luminous slide up price cards last week
Oh gosh! Thanks, finally!
Dialog with transition, good. but you forgot to show us button onclick method by the way 🙂
Love your Content, Thank you.
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.
Nice to have a simple version of from…to like in the animation key frame syntax though with “starting-style”!
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.
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.
Will it work in this case?
dialog {
...
&[open] {
...
&::backdrop { ... }
@starting-style { /* dialog starting styles */ }
@starting-style &::backdrop { /* dialog backdrop styles */ }
}
&::backdrop { ... }
}
Can you make a roadmap of your videos/playlist to learn CSS?
How to do an Expanding animation for DISPLAY like the same as opacity?
Like the `Display: none` element will show like a Stage curtain falls when it is given `Display: block` and vice versa
@16:36 was showing as not working because the properties in `transition-property` need to be comma-separated
Really wish legacy code bases could use this and modal/pop-up from the newer HTML stuff.
tried to find this on his codepen, couldn't find it!
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 :).
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!
Please, how to combine this technique with your solution for accordions made using grid-layouts and transitioning from 0fr to 1fr?
About flippin' time!
position: relative > position: fixed?
How come the `translate` property was transitioning without the `transition-property` list having it in there?
So, the translate animated, but it was not one of the transision-properties... or was I missing smomething? Off to try this out now, hope FF and Safari hurry up with this :D
Hmmm 🤔 never thought this would be added lol
tnx a lot
Why didn’t “translate” have to be added in your “transition-property” list but still got animated? Are there more properties that always transition?
When I do transition on visibility, from visibility: visible to visibility:hidden, the transition duration acts as delay, the state change happens after the duration time, but on the other hand, transitioning from visibility:hidden to visibility:visible happens immediately. How comes 😅
It's still not available as baseline. I want to know when it is available. This feels like false advertisement.
keyframes example doesn't work. I'm literally copying this one-to-one, and It just doesn't. Chrome, FF, Safari, all latest versions - it doesn't work.
What's the trick here?
Seems like it wont work in a bunch of Browsers like Safari or Firefox when I take a look at caniuse and "allow-discrete" or "@starting-style". So we can finaly transition between display none and display block but we have to wait a long time until we can use it on production systems.
So we could make a truly css only accordeon or animated tab group now?
It's been 2 weeks and I still can't figure out how to make a card flip after a Dialog opens.. every example is with :hover
ah yes, "yes", my favorite animation type
How would you implement this on a multi row header to hide certain rows? I cant figure it out.
Cool stuff. When will these be supported by most modern web browsers?
I guess most would only require Chrome and Safari?
all this time im using the simple line of css that i found myself. by using pointer events none and opacity. then transition it
Great video as always! Curious as to why the translate: 0 -25vh; animates without being specified as a transition-property?
Why is the translate transitioning even though it’s not listed in transition-property?
I did similar but with rotating
what is the [open]? never seen that before.
How can I apply that to the DETAILS tag once what is hidden automatically is everything that isn't SUMMARY? I mean, there is no css definition to them (at least from what I inspect in devTools)
Imagine fighting a junior over the non-transitionable nature of display property, and he pulls up this trick.