From the course: Modern CSS Techniques without JavaScript

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Animating the modal window and background

Animating the modal window and background

From the course: Modern CSS Techniques without JavaScript

Start my 1-month free trial Buy for my team

Animating the modal window and background

“

- [Speaker] Our popovers are looking really great at this point. They work great, they stand out on the screen, everything we could expect. But what we're missing now is a nice smooth transition. A little bit of animation goes a long way. Right now, this is goes from one state to the other very, very quickly, and an animation might be a really nice addition to this. Animation remains cutting-edge in CSS and this styling that I'm about to go through with you is no exception. So as of March, 2025, there are definitely still browser support issues with this. I'll point those out as we get there. So the goal here is going to be two things. We need to set up some animation for the popover itself as it comes up, and we need to set up some animation for this backdrop behind. So we're going to animate the opacity, which we set to zero initially, and then bring it up to one. We'll want to animate the display property, which is going to go from none to block, and that is a really new thing that…

Contents