animate radix menu

i've added animation to raddix dialog content component. you can view the page here: https://reactivate-marketing-site-01k72.wstd.io/
be sure to go to mobile breakpoint for hamburger icon to appear, once you click i have animated the dialog content component menu to slide in / out and you can toy around with your own animations. This is how I managed to do it:

Project Settings > Custom Code:

<style>
@keyframes fadeInOverlay {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes fadeOutOverlay {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@keyframes slideInContent {
from {
transform: translateX(-100%); /* Start off-screen to the left / } to { transform: translateX(0); / Slide in from the left / }}@keyframes slideOutContent { from { transform: translateX(0); / Start on-screen / } to { transform: translateX(-100%); / Slide out to the right */
}
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogOverlay"][data-state="open"] {
animation: slideInContent 300ms ease-out;
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogOverlay"][data-state="closed"] {
animation:slideOutContent 300ms ease-in;
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogContent"][data-state="open"] {
animation: slideInContent 300ms ease-out;
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogContent"][data-state="closed"] {
animation: slideOutContent 300ms ease-in;
}


</style>