makeStyles animations do not work with React and Material UI

Question

I want to animate this text to make it look like it's orbiting the globe. I am using React along with Material UI's makeStyles for the task. However, it doesn't seem to work.

I used two different approaches; as you can see in the code. One is commented out and the other (importing the css & keyframes modules) and neither worked. What am I doing wrong?

Here's the code:

import { makeStyles } from "@mui/styles"
import {jsx, css, keyframes, useTheme} from "@emotion/react"
import * as styles from "../../utils/styles"

const orbit = keyframes`
  0% {left:0};
  25% {left: 50%};
  50% {left: 100%};
  75% {left: 50%};
  100% {left: 0};
`


const useStyles = makeStyles({
  // "@keyframes orbit": {
    // "0%" : {left:"0", opacity: "0.8", transform: "scale(0.8)"},
    // "25%": {left: "50%", opacity: "1", transform:"scale(1.1)"},
    // "50%": {right: "0", opacity: "0.8", transform: "scale(0.8)"},
    // "75%": {left: "50%", opacity: "0.5", transform: "scale(0.5)"},
    // "100%": {left: "0", opacity:"0.5", transform: "scale(0.5)"}
  // },
  container: {
    border: "gray 1px solid",
    borderRadius: "50%",
    overflow: "hidden",
    // transform: "rotate(45deg)",
    display: "flex",
    flexDirection:"column",
    alignItems: "center",
    textAlign: "center",
    padding: "15px 20px 20px 20px",
    boxSizing: "border-box",
  },
  orbit: {
    border: "gray 1px solid",
    fontSize: styles.fontSizes.p,
    color: styles.colors.orange,
    marginBottom: "10px",
    position: "relative",
    "& > span": {
      border: "gray 1px solid",
      position: "absolute",
      left: "0",
    // animation: "$orbit 2s infinite",
    }
  },
})

export default function Skills(props) {

  const classes = useStyles()
  const theme = useTheme()
const animatedItem = css`animation: ${orbit} 2000ms infinite`


  return(
    <div className={classes.container} style={{width: (props.width-250)/2, height: props.height - 80}} >
      <div className={classes.orbit} style={{width:"140px", top:"0px"}}><span css={animatedItem}>HTML</span></div>  
      <div className={classes.orbit} style={{width:"220px", top: "25px"}}><span>CSS</span></div>  
      <div className={classes.orbit} style={{width:"265px", top: "50px"}}><span>SCSS</span></div>  
      <div className={classes.orbit} style={{width:"300px", top: "75px"}}><span>SASS</span></div>  
      <div className={classes.orbit} style={{width:"315px", top: "100px"}}><span>BootStrap</span></div>  
      <div className={classes.orbit} style={{width:"325px", top: "125px"}}><span>JavaScript</span></div>  
      <div className={classes.orbit} style={{width:"330px", top: "150px"}}><span>TypeScript</span></div>  
      <div className={classes.orbit} style={{width:"325px", top: "175px"}}><span>React</span></div>  
      <div className={classes.orbit} style={{width:"310px", top: "200px"}}><span>Material UI</span></div>  
      <div className={classes.orbit} style={{width:"295px", top: "225px"}}><span>D3.js</span></div>  
      <div className={classes.orbit} style={{width:"260px", top: "250px"}}><span>Wordpress</span></div>  
      <div className={classes.orbit} style={{width:"210px", top: "275px"}}><span>Agile</span></div> 
      <div className={classes.orbit} style={{width:"120px", top: "300px"}}><span>Design</span></div> 
    </div>
  )
}