Animamtion Page preview

Feature requests
1

I’m trying to make a smooth opening and closing of the page preview window with a little animation.

I’ve dug through all the gpt, but I can only animate the opening.

If I add closing - bugs come out.

the opening animation works with this code
(If you do it natively, you need to tweak the Js)

.popover.hover-popover.is-active,
.popover.hover-popover:hover {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.popover.hover-popover {
    animation: popover-entrance 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes popover-entrance {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

PROBLEM|

I was curious too, so I was waiting for the code before giving my answer. But this confirms (or at least doesn’t invalid) what I had in mind. As Holo said, I don’t think it’s possible.
You can animate an element when its states changes. Going from nothing to “I’m here” is a change of state, and the element is here. So the opening is alright.
Going from “I’m here” to nothing, means that there is nothing to animate.
CSS can’t delay javascript, so you can’t make it wait a little bit without modifying the actual Javascript code. Which CSS can’t do.
I was hoping to take advantage of the small delay before the javascript removes the element (I looked at the JS code, it is 0.3 seconds). But the HTML doesn’t provide any way to see if we are in this 0.3 seconds or not. So you can’t detect, with CSS, when you need to play the closing animation.

2

I imagine a transition property would be smoother than a keyframe animation.