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

Just some notes on top of @Ryan's answer. If you define the keyframe using makeStyles. Remember to prefix the animation name with $. I missed this small detail the first time and my code didn't work, in the example below

const useStyles = makeStyles({
  "@keyframes fadeIn": {
    "0%": {
      opacity: 0,
      transform: "translateY(5rem)"
    },
    "100%": {
      opacity: 1,
      transform: "translateY(0)"
    }
  },
  selector: {
    animation: "$fadeIn .2s ease-in-out"
  }
});

Instead of

animation: "fadeIn .2s ease-in-out"

It should be

animation: "$fadeIn .2s ease-in-out"

But if you define the keyframe in global scope. The prefix is unnecessary here

const useStyles = makeStyles({
  "@global": {
    "@keyframes fadeIn": {
      "0%": {
        opacity: 0,
        transform: "translateY(5rem)"
      },
      "100%": {
        opacity: 1,
        transform: "translateY(0)"
      }
    }
  },
  selector: {
    animation: "fadeIn .2s ease-in-out" // --> this works
  }
});

Follow this issue on github for more discussion about this.