Use Animation and keyframe in ui material makeStyles

Question

I am trying to use keyframes in makestyles of the ui material, but no effects appear. The Goal is to make the button pulse. What’s wrong with my code? This is what I managed to evolve using an example of code-pen, but in html and css.example in code-pen, only in html and css.

import { makeStyles } from '@material-ui/core/styles';

export const useStyles = makeStyles(theme => ({
  button: {
    color: 'rgb(255, 255, 255)',
    background: 'rgb(255, 121, 46)',
    animation: 'pulse 1.5s infinite',
    '&:hover': {
      backgroundColor: 'rgb(242, 101, 22)',
    },
  },
  '@keyframes pulse': {
    '0%': {
      transform: 'scale(0.95)',
      boxShadow: '0 0 0 0 rgba(0, 0, 0, 0.7)',
    },
    '70%': {
      transform: 'scale(1)',
      boxShadow: '0 0 0 10px rgba(0, 0, 0, 0)',
    },
    '100%': {
      transform: 'scale(0.95)',
      boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
    },
  },
}));

Answer 1

After some effort in vain with makeStyles, I managed to accomplish using Styled-Components as an option, because I am already using this dependency for other components. Follow the code using the keyframes in Styled Components.

// Keyframes de pulse
const rotate = keyframes`
  from {
    transform: scale(0.95);
  }

  to {
    transform: scale(1);
  }
`;

export const PulseButton = styled.div`
  display: inline-block;
  border: 1px solid rgb(255, 121, 46);
  animation: ${rotate} 0.5s linear infinite;
  width: 80px;
  height: 50px;
  position: absolute;
  background: #ff792e;
`;