Change dialog animation

Flow
1

Hi, I want to change the dialog animation.
there is a Cookbook example How do I make a dialog slide in (open) & out (close) - Vaadin Cookbook
But it uses the old styling.

I am not sure how to change it to work with the new styling. This is what I have tried:

/* Lightbox dialog overlay animation timing */
vaadin-dialog-overlay.lightbox-dialog[opening],
vaadin-dialog-overlay.lightbox-dialog[closing] {
    animation-duration: 200ms;
}

/* Opening animation on overlay part */
vaadin-dialog-overlay.lightbox-dialog[opening]::part(overlay) {
    animation: lightbox-zoom-in 200ms ease-out forwards;
}

/* Closing animation on overlay part */
vaadin-dialog-overlay.lightbox-dialog[closing]::part(overlay) {
    animation: lightbox-zoom-out 150ms ease-in forwards;
}

/* Lightbox overlay styling */
vaadin-dialog-overlay.lightbox-dialog::part(overlay) {
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

vaadin-dialog-overlay.lightbox-dialog::part(content) {
    overflow: hidden;
    padding: 0;
}

With adding the lightbox-dialog class to the Dialog.

2

Which version of Vaadin are you using?

3

V24.9.6+
When I drop the :part selector then the complete dialog including the backdrop is animated in/out. Also using :part(content) does not seem to work.