@starting-style in and out
Open, close, add and remove: watch where each element comes from.
@starting-style
display allow-discrete
overlay
Effect
New elements in the DOM
Transitions the browser started
The CSS doing the work
/* 1. where it ends up when open */ .pop:popover-open { opacity: 1; transform: none; } /* 2. closed state = where the exit goes */ .pop { opacity: 0; transform: translateY(28px) scale(.9); transition: opacity .5s, transform .5s, overlay .5s allow-discrete, display .5s allow-discrete; } /* 3. where it comes from on the first frame */ @starting-style { .pop:popover-open { opacity: 0; transform: translateY(28px) scale(.9); } }