React jssでkeyframes

CSSで行うkeyframesをjssに起こす

import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";

const useStyles = makeStyles((theme: Theme) => 
  createStyles({
    "@keyframes color": {
        "0%": { backgroundColor: "red" },
        "50%": { backgroundColor: "blue" },
        "100%": { backgroundColor: "green" },
    },
    root: {
       animation: "$color 10s infinite"
    },
  })
);

rootを適用したいコンポーネントに適用すればOK
keyframesはfrom/toでも出来るみたいです。