{"id":9651,"date":"2026-06-01T09:08:42","date_gmt":"2026-06-01T14:08:42","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=9651"},"modified":"2026-06-01T09:08:44","modified_gmt":"2026-06-01T14:08:44","slug":"in-n-out-animations-dialogs-part-1-3","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/in-n-out-animations-dialogs-part-1-3\/","title":{"rendered":"In-N-Out Animations: Dialogs (Part 1\/3)"},"content":{"rendered":"\n

I’d like to kick off a small series here focused on animating elements in and out of view. <\/p>\n\n\n\n

First, we’re going to focus on an element that goes from display: none;<\/code> to display: block;<\/code>. This is of particular interest because, well, it used to be quite difficult<\/em> to do. But more than that: it’s often highly desirable. Movement can help a user understand what’s going when a new element appears or disappears.<\/p>\n\n\n\n

Let’s start with the modern wonder that is the <dialog><\/code> element.<\/p>\n\n\n\n

Just want the final code snippet?! Jump here.<\/a><\/p>\n\n\n\n

By default, a <dialog><\/code> is display: none;<\/code> and when you open it, it becomes display: block;<\/code> naturally. We don’t have to write these styles. If we’re animating something else<\/em> between these values, that’s fine, you’ll just need to do it yourself:<\/p>\n\n\n

.thing<\/span> {\n  display<\/span>: none;\n  \n  &.open {\n    display<\/span>: block;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
If you’re like me, that triggers something in your brain that says well now you can’t animate it, bud. <\/em> And indeed, if you tried like this:<\/p>\n\n\n
.thing<\/span> {\n  display<\/span>: none;\n  opacity<\/span>: 0<\/span>;\n  transition<\/span>: 1s<\/span> opacity,\n\n  &.open {\n    display: block;\n    opacity<\/span>: 1<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
That transition would indeed not<\/em> work. If you toggled that open<\/code> class, the element would immediately appear (and disappear).<\/p>\n\n\n\n
Let’s swap over to <dialog><\/code> styles, as that’s what we’ll be animating the rest of the time.<\/p>\n\n\n
dialog<\/span> {\n  opacity<\/span>: 0<\/span>;\n  transition<\/span>: 1s<\/span> opacity,\n\n  &:open {\n    opacity: 1<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
(Note the difference of not hand-writing the display<\/code> change and using the :open<\/code> pseudo-class.)<\/p>\n\n\n\n
Here’s a video of where we are at:<\/p>\n\n\n\n\t\t
\n\t\t\t