Elements that appear from display: none, such as popovers and dialogs, could not be animated with CSS transitions before. The @starting-style rule defines the style an element starts from when it first appears, and transition-behavior: allow-discrete lets display and overlay animate. No JavaScript timing hacks needed.

HTML

<button popovertarget="lotgrafix-menu">Open</button>
<div id="lotgrafix-menu" popover>Popover content</div>

CSS

[popover] {
    opacity: 0;
    transform: translateY( 10px ) scale( 0.97 );
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        overlay 0.25s allow-discrete,
        display 0.25s allow-discrete;
}

[popover]:popover-open {
    opacity: 1;
    transform: translateY( 0 ) scale( 1 );
}

@starting-style {
    [popover]:popover-open {
        opacity: 0;
        transform: translateY( 10px ) scale( 0.97 );
    }
}

Animate a modal dialog

dialog {
    opacity: 0;
    transition:
        opacity 0.25s ease,
        overlay 0.25s allow-discrete,
        display 0.25s allow-discrete;
}

dialog[open] {
    opacity: 1;
}

@starting-style {
    dialog[open] {
        opacity: 0;
    }
}

dialog::backdrop {
    background: rgba( 0, 0, 0, 0 );
    transition: background 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
}

dialog[open]::backdrop {
    background: rgba( 0, 0, 0, 0.6 );
}

@starting-style {
    dialog[open]::backdrop {
        background: rgba( 0, 0, 0, 0 );
    }
}

Support note

In browsers without support the element still opens and closes, only without the animation.