how to use keyframes in material ui
const useStyles = makeStyle(theme => ({
mainBg: {
color: "#fff",
background: "linear-gradient(356deg, #ff0000, #000000)",
backgroundSize: "400% 400% !important",
animation: "$AnimationName 30s ease infinite;",
},
"@keyframes AnimationName": {
"0%": {
backgroundPosition: "56% 0%",
},
"50%": {
backgroundPosition: "45% 100%",
},
"100%": {
backgroundPosition: "56% 0%",
},
},
}));