Define keyframes with `keyframes` utility from #mui/system - css

Question

I was trying to create a custom Select component using MUI.
I tried using MUI Base components, with the combination of SelectUnstyled, OptionUnstyled and PopperUnstyled.
I looked for the docs and got it working.
However, I need some animation on the PopperUnstyled component (the part that pops up after we click on the Select button).
Here's my current implementation:
const StyledButton = styled("button")(
({ theme }) => `
font-family: ${theme.typography.fontFamily};
position: relative;
font-size: 0.875rem;
box-sizing: border-box;
min-height: calc(1.5em + 22px);
min-width: 320px;
border: 1px solid #D8DAE5;
background-color: #fff;
outline: none;
padding: 8px 12px;
border-radius: 8px;
text-align: left;
line-height: 1.5;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 120ms;
&.${selectUnstyledClasses.focusVisible} {
border: 1px solid ${theme.palette.secondary.main}
}
&.${selectUnstyledClasses.expanded} {
&::after {
transform: rotate(180deg);
}
}
&::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath fill='%23808D9E' d='M10.673.303a1.042 1.042 0 0 0-1.469 0L5.464 3.99 1.777.303a1.042 1.042 0 1 0-1.469 1.48l4.417 4.416a1.042 1.042 0 0 0 1.479 0l4.469-4.417a1.042 1.042 0 0 0 0-1.48Z'/%3E%3C/svg%3E");
position: absolute;
right: .8rem;
}
`
);
const StyledListbox = styled("ul")(
({ theme }) => `
font-size: 0.875rem;
background-color: ${theme.palette.grey[50]};
box-sizing: border-box;
padding:8px;
margin: 8px 0;
min-width: 320px;
border-radius: 8px;
overflow: auto;
outline: 0px;
border: 1px solid ${alpha(theme.palette.primary.main, 0.25)};
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
animation: slideUp 100ms ease;
`
);
export const StyledOption = styled(OptionUnstyled)(
({ theme }) => `
list-style: none;
padding: 8px 16px;
border-radius: 8px;
cursor: default;
&:last-of-type {
border-bottom: none;
}
&.${optionUnstyledClasses.selected} {
background-color: ${theme.palette.grey[300]};
color: ${theme.palette.primary.main};
font-weight: 500;
}
&.${optionUnstyledClasses.disabled} {
color: ${theme.palette.grey[300]};
}
`
);
const StyledPopper = styled(PopperUnstyled)`
z-index: 1;
`;
export function StyledSelect(props) {
const slots = {
root: StyledButton,
listbox: StyledListbox,
popper: StyledPopper,
...props.slots,
};
return <SelectUnstyled {...props} slots={slots} />;
}
I did some research and found a way of defining keyframes using styled utility but I didn't get it working with tagged template literals that I am using to style my Select component
const StyledListbox = styled("ul")(
({ theme }) => `
"#keyframes slideUp": {
from: {
opacity: 0,
transform: translateY(1rem)
},
to: {
opacity: 1,
transform: none
}
},
font-size: 0.875rem;
background-color: ${theme.palette.grey[50]};
box-sizing: border-box;
padding:8px;
margin: 8px 0;
min-width: 320px;
border-radius: 8px;
overflow: auto;
outline: 0px;
border: 1px solid ${alpha(theme.palette.primary.main, 0.25)};
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
animation: slideUp 100ms ease;
`
);
I also found a utility called keyframes under #mui/system but did not find any documentation on that.