Question on Hover Card

[WebAFilippov]

hello everyone. please tell me how to set up the animation of the output of content out of focus

.HoverCardContent {
transform-origin: var(--radix-hover-card-content-transform-origin);
animation: scaleIn 0.5s ease-out;
}

@Keyframes scaleIn {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}

Perfectly animates the appearance, the survey how to animate the closure

[joaom00]

Hi @WebAFilippov,

to animate when unmount you can do the following

.HoverCardContent {
  transform-origin: var(--radix-hover-card-content-transform-origin);
}
.HoverCardContent[data-state="open"] {
  animation: scaleIn 0.5s ease-out;
}
.HoverCardContent[data-state="closed"] {
  animation: scaleOut 0.5s ease-out;
}


@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}

@keyframes scaleOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}

[WebAFilippov]

Thank you very much you helped me och