How to apply custom animation effect @keyframes in MaterialUI using makestyles()

Question

I have learnt to use animation in css using @keyframe. I however want to write my custom animation code to my react project(Using materialUI). My challenge is how I can writ

Answer 1

Here is an example demonstrating the keyframes syntax within makeStyles:

import React from "react";
import ReactDOM from "react-dom";

import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import clsx from "clsx";

const useStyles = makeStyles(theme => ({
  animatedItem: {
    animation: `$myEffect 3000ms ${theme.transitions.easing.easeInOut}`
  },
  animatedItemExiting: {
    animation: `$myEffectExit 3000ms ${theme.transitions.easing.easeInOut}`,
    opacity: 0,
    transform: "translateY(-200%)"
  },
  "@keyframes myEffect": {
    "0%": {
      opacity: 0,
      transform: "translateY(-200%)"
    },
    "100%": {
      opacity: 1,
      transform: "translateY(0)"
    }
  },
  "@keyframes myEffectExit": {
    "0%": {
      opacity: 1,
      transform: "translateY(0)"
    },
    "100%": {
      opacity: 0,
      transform: "translateY(-200%)"
    }
  }
}));

function App() {
  const classes = useStyles();
  const [exit, setExit] = React.useState(false);
  return (
    <>
      

        
Hello CodeSandbox
        
Start editing to see some magic happen!
         setExit(true)}>Click to exit
      
      {exit &&  setExit(false)}>Click to enter}
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Documentation: https://cssinjs.org/jss-syntax/?v=v10.0.0#keyframes-animation