We can now transition to and from display: none
Summary
TLDRThis script explores the intricacies of animating elements like modals and popovers in CSS, traditionally a complex task. The speaker demonstrates how recent advancements in CSS, such as keyframes and transitions, simplify this process. They address the challenges of animating properties like 'display' and introduce new CSS properties like 'transition-behavior' and 'start-style' to create smoother and more controlled animations. The script also highlights the importance of understanding CSS fundamentals for effective web development and touches on browser support for these features.
Takeaways
- 😀 CSS animations and transitions can now handle complex behaviors like fading in and out, which were previously challenging without JavaScript.
- 🎨 The speaker demonstrates animating a modal dialog box, showcasing how to use CSS for both opening and closing animations without relying on JavaScript.
- 🔑 The CSS `animation` property is used for creating keyframes, allowing for smooth transitions between states, like opacity changes.
- 🚫 A common issue arises when trying to animate properties considered 'discrete', such as `display: none`, which do not transition smoothly.
- 🆕 CSS properties like `transition-property`, `transition-duration`, and `transition-behavior` are introduced to handle smooth transitions, including those with discrete animations.
- 🛠 The `@apply` rule in CSS, which allows for nesting styles, simplifies the process of applying multiple styles to an element, but cannot be used within pseudo-elements.
- 🌐 Browser support for these new CSS features is improving but is not yet universal, with Chrome currently leading in support for these advanced features.
- 🌈 The script covers how to create visually appealing effects, such as gradients for backdrops, to enhance the user experience with modal dialogs.
- 📚 The importance of understanding CSS fundamentals is highlighted to overcome frustrations and write more confident code, with a mention of a course that could provide deeper insights.
- 🔄 The concept of 'starting style' is introduced to define the initial state of an animation, which is crucial for creating bidirectional transitions.
- 💻 The speaker emphasizes the use of progressive enhancement in web development, ensuring that all users have a functional experience while those with newer browsers get an enhanced visual experience.
Q & A
What challenges did the speaker originally face when trying to animate elements like modals or popovers?
-The speaker originally faced difficulties with animating elements such as modals or popovers, finding it harder than expected. They had to resort to using JavaScript, event listeners, or set timeouts to manage the transitions from 'display none' to 'display block', 'grid', 'flex', etc.
How has the introduction of CSS animations and transitions by the CSS working group simplified the process of animating elements?
-The introduction of CSS animations and transitions has made it much simpler to animate elements. It allows for effects like fading in and out and sliding without the need for JavaScript, by just using CSS properties and keyframes or transitions.
What is the default state of the 'dialog' element when it is not being displayed?
-The default state of the 'dialog' element when it is not being displayed is 'display: none', which is a user agent style that gets toggled to 'display block' when the element is clicked on.
Why is it recommended to declare 'display: none' and 'display: block' even if they come from the user agent styles?
-It is recommended to declare 'display: none' and 'display: block' explicitly because it makes it clear what the closed and open states of the element are. This can be particularly important when animating or working with these properties where explicit declarations may be necessary.
What is a 'backdrop' in the context of modals and how is it typically handled in terms of display?
-A 'backdrop' in the context of modals is an element that appears behind the modal to provide a visual separation from the rest of the page content. For simplicity, the speaker initially sets the backdrop to 'display: none', but it is planned to animate it later in the presentation.
What is the purpose of keyframes in CSS animations?
-Keyframes in CSS animations define the different stages of an animation. They allow developers to specify the starting and ending points (as well as any intermediate steps) of an animation, making it easier to create complex animations with CSS alone.
Why is using 'animation' considered overkill for a simple fade transform?
-Using 'animation' is considered overkill for a simple fade transform because it involves setting up keyframes for both the 'appear' and 'vanish' states, which is more work than necessary for a simple effect that could be achieved with transitions.
What is a 'discrete animation' and how does it differ from a 'transition'?
-A 'discrete animation' is an animation where the property changes instantly at the midpoint of the animation duration. It differs from a 'transition', which smoothly changes a property over a specified duration without instant changes in between keyframes.
Why might transitions not work when changing from 'display: none' to 'display: block'?
-Transitions might not work when changing from 'display: none' to 'display: block' because 'display' is considered a discrete animation property. This means it changes instantly at the 50% mark of the animation, preventing a smooth transition from occurring.
What is the 'transition-behavior' property in CSS and how does it help with animating discrete properties?
-The 'transition-behavior' property in CSS is used to specify whether a transition should be allowed even when it involves discrete animations. By setting it to 'allow-discrete', it enables transitions to occur on properties that would normally prevent transitions from happening, such as 'display'.
What is the 'starting-style' property in CSS and how does it help with controlling the start of a transition?
-The 'starting-style' property in CSS is used to define the initial state of an element before a transition or animation takes place. It helps control the start of a transition by setting specific styles that the element should have at the beginning of the animation, allowing for more granular control over the animation process.
Why is browser support for certain CSS properties important and how can it affect the user experience?
-Browser support for certain CSS properties is important because it determines the consistency and availability of features across different platforms. Lack of support in some browsers can lead to a degraded user experience, where certain animations or styles may not work, or where the website may not function as intended.
What is the concept of 'progressive enhancement' in web development?
-Progressive enhancement is a web development approach that focuses on providing a basic level of user experience to all browsers, while enhancing the experience for those browsers that support more advanced features. This ensures that the website is functional and accessible, even if some users are on older or less capable browsers.
Why is it recommended to use 'overlay' or 'top layer' in modals and popovers?
-Using 'overlay' or 'top layer' in modals and popovers is recommended to ensure that the modal or popover appears above all other page elements, preventing any z-index issues. It helps manage layer stacking and makes sure that interactive elements within the modal are on top of other page content.
What limitation does CSS nesting have with pseudo-elements, and how can it be worked around?
-CSS nesting has a limitation where it cannot be used inside pseudo-elements. This can be worked around by using the 'starting style' at-rules outside of the pseudo-element and then nesting the pseudo-element rules inside the 'starting style', rather than the other way around.
Outlines
😀 Animating UI Elements with CSS Transitions and Keyframes
The speaker introduces the topic of animating user interface elements, such as modals, without the need for JavaScript by utilizing CSS animations and transitions. They discuss the challenges faced when toggling between 'display none' and other display properties and how CSS has evolved to simplify these processes. The speaker demonstrates using keyframes for a fade effect and explains that while animations are an option, transitions can be more efficient for simple fade-ins and fade-outs. They also mention the importance of understanding the 'display' property and its behavior during animations.
😕 Overcoming CSS Discrete Animation Challenges
The speaker delves into the difficulties of using CSS transitions with discrete animations, such as changing the 'display' property, which traditionally does not allow for smooth transitions. They explain the concept of discrete animations and how they work differently from continuous animations, causing transitions to fail. The speaker provides a workaround by using the 'transition-behavior' property with 'allow-discrete' value to enable transitions despite the discrete nature of the animation. They also highlight the importance of understanding CSS fundamentals to overcome such challenges.
🔄 Advanced CSS Transition Techniques and Browser Support
The speaker explores advanced techniques for creating smooth transitions, including the use of the 'starting-style' property to define the initial state of an element before the transition. They discuss the potential frustrations of working with CSS and how understanding its underlying principles can alleviate these issues. The speaker also touches on browser support for these CSS features, noting that while support is improving, it is not yet universal, and emphasizes the importance of progressive enhancement to ensure a consistent user experience across different browsers.
🎨 Enhancing Modal and Backdrop Animations with CSS
The speaker focuses on animating modal dialogs and their backdrops, adding visual effects like gradients to enhance user experience. They explain how to use CSS to transition the backdrop's opacity and overlay properties to ensure a smooth entrance and exit of modal dialogs. The speaker also addresses the limitations of using nesting within pseudo-elements and the necessity of using 'at starting-style' for animations involving pseudo-elements. They demonstrate how to apply these techniques to create a seamless and visually appealing modal interaction.
🌐 Final Thoughts on CSS Animations and Browser Compatibility
In the concluding segment, the speaker wraps up the discussion on CSS animations, emphasizing the importance of understanding CSS properties and their interactions. They provide a brief overview of the 'transition-behavior' property and its role in allowing discrete animations to transition smoothly. The speaker also mentions the need to consider browser compatibility and the use of progressive enhancement to provide a baseline experience for all users while enhancing the experience for those on supported browsers. They encourage viewers to explore further resources for a deeper understanding of CSS.
Mindmap
Keywords
💡CSS Animations
💡CSS Transitions
💡Keyframes
💡Display Property
💡Opacity
💡Backdrop
💡Discrete Animation
💡Transition Behavior
💡Starting Style
💡Nesting in CSS
Highlights
CSS now supports animations and transitions for properties like display, making it easier to create effects without JavaScript.
The CSS working group has introduced new methods to handle animations and transitions for display properties.
Creating keyframes for opacity transitions can be used to animate elements from display none to display block.
Animations with keyframes can be overkill for simple fade effects and transitions might be more suitable.
Transitions can be tricky with properties like display that are considered discrete animations.
The 'transition-behavior' property with 'allowed-discrete' value can enable transitions for discrete animations.
The '@start' style rule in CSS allows defining the starting point of a transition.
Nesting CSS rules can simplify the syntax but cannot be used inside pseudo-elements.
Browser support for CSS transitions and animations on display properties is improving but still not universal.
The 'overlay' property is important for modal dialogs to ensure they appear on top of other elements.
Animating backdrops in modal dialogs can enhance user experience but requires careful handling of transitions.
CSS transitions and animations provide a progressive enhancement, offering better experiences on supported browsers without breaking functionality on older ones.
MDN Web Docs is now a collaborative effort supported by donations, important for developers relying on it for CSS and web standards.
Understanding CSS fundamentals like discrete animations and formatting contexts can alleviate common frustrations with CSS.
CSS properties like 'display' can behave unexpectedly during transitions, requiring specific workarounds.
The video provides a comprehensive guide on animating modal dialogs and backdrops using CSS transitions and animations.
Using 'caniuse.com' to check browser support for specific CSS features is essential for ensuring cross-browser compatibility.
Transcripts
hi there my friend and friends if you've
ever tried to create a model that would
slide in or animate or Fade Out and fade
in and all of that like this or you've
done a popover you've done anything that
involved going from a display none to a
display of block or Grid or Flex or
whatever it is uh you probably found out
it was a lot harder than you thought it
would be to do something like this and
you ended up using some JavaScript to do
different things and maybe using event
listeners or whatever it is or just
toggling based on set timeouts there's a
few different methods you can use but
those are all things of the past now
because the CSS working group hurt us
and we can do things just like this with
animations and transitions now and if
we're just doing it like I have here
where it's just a transform with a
opacity fade and stuff like that an
animation is definitely Overkill but
it's actually a little bit easier to do
it with an animations we're going to
look at that first and then we're going
to look at how we can do it with a
transition instead just cuz there's a
few extra new things along the way to
get it working there but it's super
awesome and super easy to do all right
so right now I'm using a dialogue right
here so you can see that with this
button here and I'm just using the show
model and close methods right now so it
opens and closes the model and the only
really important thing with this model
is that the dialogue element when we're
doing it it will have a display of none
is a user agent style that gets toggled
over to a display block when we click on
it so I don't actually have to declare
these because they're coming from the
user agent Styles but I'm going to leave
them here because it is quite possible
that you're animating or doing something
with these where you actually have to
declare these properties and so I just
want to make it really explicit that
this is on my closed State and this is
on my open state that we have those
right there now it's a little bit hard
to see in the demo I have set up right
now but there is a backdrop that comes
through here and for Simplicity I'm
going to just put that as a display none
as well for now but we're going to come
back and look at how we can animate the
backdrop as well just cuz there is
actually a little bit of a gotta with
that and we'll talk more about what
backdrop even is if you're not familiar
with it so as I said we're going to
start with the animation first uh and
with key frames and then we'll look at
how to do it with transitions cuz doing
it with uh key frames is actually
incredibly easy now we used to not be
able to do this but what we can do is we
can create some key frames like this for
I'm just going to call it a where we
want to go from an opacity of zero to an
opacity of one and this actually I think
always worked uh no matter what so it
was when we go to the open State we
could come and we could do an animation
then of our appear and let's just say
it's 1 second long so we can see it's
working right there that we're coming in
and that's perfect where things break is
if we wanted it to go away and one thing
with uh key frames if ever using them if
you want like an animation to run one
way and then another you actually have
to change the animation name uh where it
won't work so I'm going to do a vanish
here and then it's just going to be two
and then this will be our from and
that's kind of awkward so we can switch
the order though the order doesn't
matter it's the the key frames that
we're talking about that are the
important part but the vanish will go
from the opacity of one to an opacity of
zero and you would think all we' need to
do here is we could just copy this line
switch it over to a vanish uh and you
would think that would work because then
when we click on it we're adding the
animation it appears and then we'd click
this and it would vanish but it doesn't
and that's because display none is
instantly toggling to a display of none
it just happens it goes to display none
and there's no animation to run anymore
because the element is display nun and
it's gone and this is always frustrating
and there's JavaScript solutions to this
and stuff but we don't need to do that
anymore uh luckily so now what we can do
is all this is the the simplest thing in
the world we just have to come here and
say that this is a display block or
whatever you know if you're using grid
or something else you'd put whatever
your display value is here and then here
you just do a display of none and
normally if you look at the spec display
shouldn't be able to animate like this
and it's actually a discrete animation
meaning uh normally discrete animations
flip at the 50% Mark so it would be
halfway through the animation it would
do it but display never work that way
display is always and it's in the spe
that it would do it instantly at the
beginning of the animation but if we do
this now it knows to wait until the end
so if I click on it it fades in and now
if I click on it again it fades out and
it works and it's
fabulous it's so nice that this is easy
to do now it's it's wonderful to use but
this is a lot of work for something that
would just should work with transitions
right I have to create an appear and a
vanish key frames and set them all up
and then I need the animation here and a
different animation here it's not that
bad honestly but it's more work than
what we actually need to do with the
caveat that if you have more complex
things going on where you actually need
multiple key frames then this is what
you'd actually want to be doing right
you know if you have like spinning and
moving and you have more than a from and
a two so it's not just the 0% and the
100% there's other steps involved well
then this is the direction you want to
go in if all you need to do is make
something fade in or out or we're going
to see how we can move it up and down
and all of that we can now do that with
transitions as well but as I said it's a
little bit trickier so if you do want to
access this code exactly as it is here
with the key frames it will be linked in
the description um but we're also going
to now take this and we're going to make
this work with transitions instead so
I'm going to delete all of that and now
we're back to what we were before and
we'll see how we can do it with a
transition so let's also drop this off
from here and here and again the the one
frustrating thing for me on this whole
thing is there's a little caveat with
this backdrop but um it's not a big deal
but it's it's a little bit of an
annoying thing that we'll see uh but
what you'd want what you think you could
do here is let's just say that we want
to go from an opacity of zero and then
here we want to have our opacity of one
right opacity of one and we just then
ideally would just do a transition of
our opacity and once again we'll do 1
second and we would hope that when we
click that it would work but you can see
it doesn't and this is a thing with
transitions is if there's a property
that's changing that is considered a
discrete animation and a display block
is one of those it will prevent any
transitions from working and just if you
don't really know what a discreet
animation is just really really quickly
here here I'm going to do a little
Interruption cuz we're going to look at
this with background images and
background images are considered a
discrete animation so here I just have
this animation that's happening where it
should take 10 seconds to happen when I
hover but you'll see it just instantly
changes and it's actually instantly
changing after 5 seconds because it's
getting to the 50% Mark of the animation
and then it just instantly switches
because we can't do a background image
and I only have it on Hover right now so
as soon as I leave it goes back to its
starting state so the animation's only
running here now this is different from
display because display property we're
here I'm going to throw these spans in
here and if we go and take a look um I'm
also doing body hover and then my div so
I want just this div with all my hands I
want it to go from a display none to
having a display of block and it should
take 10 seconds for this to happen so
you'd expect the hands to actually show
up after 5 seconds because it's a
something it's a discret animation but
when I go on you can see they actually
instantly appear uh and then the rest
happens and the opacity is not working
nothing else is working and that's
because if something has a discret
animation the transitions will not work
at all uh is the important thing and so
it just it's instantly going from here
to here and it's not transitioning at
all it just the hands come on and off
and there's no delay or anything and
this might have you wondering how do you
know if something is a discrete
animation so we're going to jump on over
to MDM now where we have the background
image which I just mentioned was and
here if you go on over to the in this
article section there's always going to
be a formal definition and if you go to
the formal definition you'll get this
table like this and there's always an
animation type and you can see it says
discreet if we go to background position
and we go to the formal definition we're
going to see that in this case the
animation type is a repeatable list and
let's just go over to let's say clip
path um as another one we're going to
click on formal definition and in this
case animation type yes as specified for
basic shape otherwise no so you'll get
more information on it the one that
you're looking for obviously you know
bottom we can go check that one too
really fast a length of percentage or a
cal so there's different limitations
sometimes on them but if it says discret
it's one of those ones where it's going
to happen in the middle but we're
getting around that now we're going to
see what that is so sorry for the little
Sidetrack here and I'm going to stay on
the Sidetrack for just one more second
because if you use MDM I just want to
give a little PSA here public service
announcement that uh MDM is not actually
completely run by mazilla anymore it's
now more of a collaborative effort with
most of the work both to maintain and
update everything that's going on here
being done by the open web docs which is
actually a nonprofit that relies on
individual and corporate donations to
fund their operation I'm going to put a
link to them in the description so if
you'd like to learn more about it and if
you use MDM which I'm pretty sure you do
if you're watching this video you might
want to mention it to your boss or
something like that cuz you know say
something like I wouldn't be able to do
my job if it wasn't for these guys and
see if they can't throw a little bit of
money their way to help fund everything
they're doing so we can continue to rely
on MDM and all the stuff here to be able
to do our jobs properly but anyway with
that out of the way let's jump back on
over to animating from display none
right here and so we want to do it in
this case it's transitioning I guess uh
and so this obviously it's not working
right now so what can we do to actually
make this work and there's a couple of
things the first thing is we actually
want to transition our display property
as well so just to make life a little
bit easier here I'm actually going to do
a transition uh property and I'm going
to do display and opacity just so I can
break it off onto more lines and then
this one's going to be my duration which
would be 1 second and so that just means
the display and the opacity are going to
transition over a duration of 1 second
and if I do this it's still not going to
work that that'd be nice if that was the
trick CU that was the trick when we did
it with the key frames before right uh
but it's not actually far off there's
just one more line that we need which is
our transition behavior and this is the
new thing that sort of unlocks
everything which is allow discreet or
one of two new things there's a second
one that we're going to need in a minute
what this allow discreet means is
because because as I said before if
something involves a discret animation
going on transitions will not work it
just goes nope there's a discret
animation here we're we're ignoring the
transition now what we're saying is whoa
wait a second here we're going to allow
it even though we have those discret
animations on there and it works sort of
it's working in one direction we're
getting there so now we're actually this
way is not working but going the other
way is and this is where there's that
second new thing that I mentioned which
is that we want to add in one more thing
to actually tell it where it's coming
from and that's because it's going from
a display none to what we have here and
it gets a little bit lost along the way
and this is one of those frustrating
things where it feels like oh I just
figured it out it's why why is it only
working in One Direction and I
understand that that's why MDM is great
um for things like this and sometimes
CSS can just feel really frustrating
though and you feel like you're getting
there and then you hit another roadblock
and you're getting there and you hit
another roadblock and from my experience
most of those frustrations start to go
away when you understand a lot of the
fundamentals of how the language
actually works including things like are
discrete animations as well as things
like formatting context and containing
blocks and more things that just don't
get talked about enough and if you'd
like to get a really solid understanding
of why CSS works the way it does and so
that way you're less frustrated with it
and you're writing it with a lot more
confidence I'd suggest checking out my
course CSS demystified which are created
for that exact purpose there is a link
to it in the description but if you just
want to worry about this transition
that's fine too we're going to look at
exactly that right now which I'm going
to go on the open here and we're going
to use a bit of nesting um we'll look at
the non- nested version of this as well
but I'm going to do a starting style
here and this is as I said I hinted at
there's I didn't hint at I said there is
a new thing which is another new thing
like our allow discreet which is our
start style and it's not start style
actually it's I said it out loud and
like start style doesn't sound right
starting style and the starting style is
where does this thing start from so so I
actually want to have my starting style
of an opacity of zero that's going to go
to here and now it fades in and it fades
out so that looks a lot nicer right I'm
happy with that uh the one thing at this
point this might feel like oh well I'm
going I have the zero here and the zero
here that's kind of frustrating and
annoying you're going to be very happy
about this in a second though because
right now this works and if this is all
you need well I mean it works so that's
great but by having this this and this
as three separate things instead of just
two it opens up a whole world of extra
stuff that we can do so as an example of
that maybe I come here and I do a
translate of zero and -25 VH so if I
just do that here and then here I come
in with my 0 0 like that and for now
let's actually have the starting style
exactly the same so we're this and this
are matching one another it's going to
go in and then it's going to go back to
where it was so it's the same thing in
both directions but because we have
these separated that means we can
actually make these different so I can
actually say that this one is a positive
25 so the starting style is different
from when we're going towards our close
state so we really have to think of this
is my starting style this is once it's
opened and this is where it goes once
it's closed which is kind of weird and
different from how we might normally
think about things just cuz the order of
it you can see it slid in from the top
because we're going from the - 25 and
now it's going to go out the bottom so
that's kind of cool CU we can have
different different directions and
different things going and it just opens
up that extra world of control now I did
mention that on here we're going in with
the starting style uh is nested inside
of here and I'm using nesting because I
find this is just a lot easier to do it
this way and that's just also because if
this is supported by the browser then
nesting is 100% supported so I'm not
worried about the browser support of
nesting because I'm using this and
speaking of browser support this is one
of those nice things where browser
support is far from perfect right now
everything I'm doing is only working in
Chrome the animation ones I think is one
version back and this starting style is
only supported in the latest release and
speaking of browser support if you go to
can I use and actually we should do that
together so I can show this to you and
if we look up starting style first we'll
notice that it's supported it's there
it's in Safari and in our chromium
browsers Firefox it's not quite there
yet um but at least it's in our two
browsers so that is awesome the one
that's a little bit annoying is if we
look at the transition Behavior which is
that other one right uh behav you got to
spell things properly for these to work
uh where it looks like it has equal
support and it's actually coming in
Firefox so that's great we're getting
much better browser support for it it's
almost at you know 78% it's fantastic
the thing is if we scroll down a little
bit here uh we get to this one which is
transition Behavior allowed discreet uh
which all of a sudden it's not working
in Safari or Firefox and it's
specifically talking about our display
property there and that's because as I
said we have other discrete animations
we have our background images and
there's a whole bunch of other stuff
where Safari is supporting those Safari
and Firefox is on the way to supporting
them but it's only chromium browsers
right now that are supporting when
you're using it specifically with
display which is a little bit kind of
annoying um but I mean support's still
at over 70% and if this doesn't work it
just means the animation won't be there
everything else is still perfectly fine
but the thing is even if you're on one
of these browsers where it's not working
it's a progressive enhancement where
we're not going to break anything
because none nothing I've done like the
starting style if there's no animation
it doesn't really matter so this not
being understood by the browser if it's
older doesn't matter and if the gets to
these and it goes well I'm just not
doing this I don't know what this
transition behavior is and I can't do a
transition on display just means it's
turning it on and off so we just go back
to square one where we don't have that
animation in older browsers newer ones
get the nicer experience the best way to
do web development is to do it with
Progressive enhancements where things
look better on browsers that support it
but nothing is broken on older browsers
they still get all of the stuff they
need just it doesn't look quite as good
but yeah we have a couple of other
things that I want to talk about in the
first one or it's mostly about the the
nesting here CU and the backdrop uh I'm
going to come up here and I'm doing this
because it's on a dialogue and if you do
this on a popover you'll want to use
this as well which is we're going to add
in overlay and overlay is just because
uh when we open a modal you can actually
see this inside of our Dev tools if I
drag these on over uh there
is oh look at that it's saying that it
doesn't understand what's happening here
why
not we didn't break anything did we they
got to update the dev tools look at that
it's working
fine uh see this top layer pill here
though uh so the top layer is making
sure that this is in front of everything
else and popovers also use this top
layer and it just ensures sort of like
prevents any Z index issues basically
from coming up it's bringing it all the
way to the front and if you don't
include the overlay as one of your
things here it's possible when your
animation's turning off or coming on
that if you have Z index Z stuff going
on the top layer only comes in at the
end or halfway through I'm not sure
exactly how it would work but it just
you might have these layering issues
whereas if you're mentioning the overlay
here with the allow discreete everything
should be fine so yeah there we go
that's working it's up and down and we
want to get that backdrop working so
what we're going to do is let's do our
backdrop and make it look a little bit
fancy ier first so there we go I just
added a red to blue gradient on there
nothing too fancy so when I open it we
hit the backdrop that comes in and then
the backdrop disappears and once again
we're going from a display none to a
display of blocks we can use all the
exact same things that we've uh learned
along the way here to make that actually
transition in uh and actually I'm doing
this on my open let's just we can just
it can always have that background image
we don't need to uh change that so our
background image is always there and
this will be an opacity of zero and then
when we have our Di dialog open we can
change the backdrop and then here the
opacity can be like 8.75 or something
just so we can actually see through it
now it's still not going to transition
but we see that at least it's working uh
and everything is there awesome the next
thing we're going to do is let's come in
with what we were looking at before
where we do our transition properties
right and we wanted our opacity but then
we also need the display and we also
need the overlay so our top layer works
properly since we're transitioning we'll
come in with a transition duration of 1
second so it matches everything else
that we've been doing so far and we're
going to lastly come in with that
transition behavior nice little bit of
reinforcement here in this learning
right you cover the same thing go a
little bit faster the second time around
uh of a loud discreet and in doing that
we get it not working in this direction
but it works when we go backwards or
when we close it because we don't have a
starting style and this is where the
nesting thing comes up um because if I
do it start starting style here this is
going to drive people nuts if they don't
watch this you a lot of people drop off
when they're watching my videos they'll
have watched the first half and they're
gone now they're missing out on
something that's going to drive them
bananas one of those things is CSS that
can be a little bit frustrating uh we're
going to do an opacity of zero here and
it's not going to
work this is one of those uh annoying
things with CSS um right because it's
working and actually just really fast
here you can see if I open and close it
and then open it really fast it's like
the it because it was at that point of
the animation it's just continuing from
where it was I think that's kind of cool
right so like it it'd be kind of weird
if it janked all the way back up but
anyway I'm getting off topic uh this
isn't working because I'm using nesting
and you can't Nest inside of a pseudo
element just the way it is with CSS and
the way CSS nesting works so because of
that I actually have to take this off
and this is a limitation if you look up
in like the actual spec it's in there um
that you can't do that so what you need
to do is actually do an at starting
style here starting style and then in
here and this is just it's an at rule so
it works just like a media query or
something like that where I can then
bring rules inside of that and then here
I can say that the opacity is going to
be a uh zero and now we can close it and
it closes and we can open it and it
fades in as well and so if ever you have
any pseudo element at all you cannot use
nesting within that pseudo element it's
one of those just gotchas of CSS I think
this is so much cleaner so much nicer
but if you do have a backdrop or
something else that you want to be able
to play with or animate or do whatever
that involves nesting or you use a
before and an after and you're trying to
do this cuz maybe you're doing a display
of nun to a display of block or whatever
it is on a pseudo element you need the
starting Style on the outside and the
pseudo element nested inside of that and
not the other way around now if you'd
like to learn more about models and
everything with like the dialogue here
and the the show modal and the clothes
and how they work and all the different
stuff to do with them and more about the
backdrop and all of that stuff I've gone
in depth on how they work in this video
that is right here and if you were
interested in CSS demystified the link
for that is in the description and with
that I would like to thank my enablers
of awesome who are Philip Andrew Simon
and Tim as well as all my other patrons
for their monthly support and of course
until next time don't forget to make
your corner of the internet just a
little bit more awesome
5.0 / 5 (0 votes)