In-N-Out Animations: Popovers (Part 2/3) – Master.dev Blog
/ BLOG
@starting-styleallow-discreteAnimationCSSPopover
In-N-Out Animations: Popovers (Part 2/3)
Chris Coyier<br>on<br>June 12, 2026
We kicked this series off looking a animating in and out the element. This time we’re going to look at popovers. That is, this modern beauty:
button popovertarget="my-popover"><br>Toggle Popover<br>button>
aside popover id="my-popover"><br>Content of popover<br>aside>Code language: HTML, XML (xml)
That "popover" will open and close (i.e. change from display: none; to display: block;) automatically with the button press. But we want to animate that! In and out!
Admittedly, popovers are fairly similar to dialogs (but certainly have important differences), and that is part of the point. We’re going to show off that our three-phase system we established in the first article transfers over to something else just fine.
In-N-Out Animations: Dialogs (Part 1/3)
In-N-Out Animations: Popovers (Part 2/3)
Demo so you an see what we’re doing:
CodePen Embed Fallback
Reminder: The 3-2-1 System
The important thing to remember about styling both the in and out of an element was styling all three states and in order such that the "on the way in" styles have enough specificity to win over the open styles.
It’s essentially like this
.element {<br>transition: ...;
/* 3 */<br>&:not(.open) {
/* 2 */<br>&.open {
/* 1 */<br>@starting-style {<br>&.open {
}Code language: CSS (css)
3-2-1 with Popovers
Popovers have their own special pseudo-class for determining if they are open or not, so we can apply it like like below. This time, we’ll transition the opacity and rotate property. Anything is on the table! That’s just what we’re choosing this time.
[popover] {<br>--timing: .66s;
transition:<br>var(--timing) opacity,<br>var(--timing) rotate,<br>var(--timing) display allow-discrete,<br>var(--timing) overlay allow-discrete;
/* 3 */<br>&:not(:popover-open) {<br>opacity: 0;<br>rotate: 10deg;<br>transform-origin: top left;
/* 2 */<br>&:popover-open {<br>--timing: 0.2s;<br>opacity: 1;<br>rotate: 3deg;
/* 1 */<br>@starting-style {<br>&:popover-open {<br>opacity: 0;<br>rotate: -3deg;<br>}Code language: JavaScript (javascript)
Handling Reduced Motion
We’re introducing movement on the page here. We should take care to not do that if the user doesn’t want it. But the opacity change is fine. So we’d do it like this.
@media (prefers-reduced-motion: reduce) {<br>[popover] {<br>transition:<br>var(--timing) opacity,<br>/* rotate is removed! */<br>var(--timing) display allow-discrete,<br>var(--timing) overlay allow-discrete;
&, &:popover-open {<br>rotate: 0deg;<br>}Code language: JavaScript (javascript)
Note that we’ve made the popover have no rotation. That’s not a requirement, you could leave it tilted if you want.
Here’s the final demo.
Noting a Safari Quirk
Positioning anchors for popovers are "implied" in most browsers. And that’s true of Safari as well. You can see when we open the popover, it’s positioned where the button that opened it is. But "on the way out" it loses that anchor for some reason. Bug? Unsure. So in the demo we’re just being specific about the anchor and that fixes it.
Also, in Part 1, the "on the way out" styles for the have an issue with the inset property, so we set it explicitly to inset: 0; and that fixes Safari.
In-N-Out Animations: Dialogs (Part 1/3)
In-N-Out Animations: Popovers (Part 2/3)
Wanna learn CSS Animations deeply?
-->
We have an incredible course on all things CSS animations and transitions from David Khourshid. Access 300+ courses with a Master.dev subscription and get 20% off today!
Personalized Learning
Industry-Leading Experts
24 Learning Paths
Live Interactive Workshops
20% Off
Start Learning Today →
Leave a Reply Cancel reply<br>Your email address will not be published. Required fields are marked *<br>Comment *<br>Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
Notify me of follow-up comments by email.<br>Notify me of new posts by email.
Table of Contents
Reminder: The 3-2-1 System<br>3-2-1 with Popovers<br>Handling Reduced Motion<br>Noting a Safari Quirk
Did you know?
Our courses go beyond frontend into fullstack, devops, and AI.
→ Explore courses (20% off)
$966,000
Master.dev donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.
RSS
Contact: support@master.dev
Master.dev is proudly made in Minneapolis, MN
©2026 Master.dev ·<br>Terms of Service · Privacy Policy