Keyframes With Inline Styles Reactjs

I'm trying to set the keyframes of a pulsate animation in ReactJS. I tried just setting the keyframes inside the inline style but that doesn't work. My code const NewRelpyheButton

Solution 1:

If you like to keep all your styling tightly coupled to your components, give Styled Components a go. They have a helper for keyframes

e.g.

importstyled, { keyframes } from'styled-components'constpulse=keyframes`from {
    background-color:#001F3F;
  }

  to {
    background-color:#FF4136;
  }
`constBar=styled.div`color:#000;padding:1em0;font-size:20px,text-align:center;cursor:pointer;position:fixed;bottom:'0',width:100%;z-index:10;animation:${pulse}1.2sease-in-out;animation-iteration-count:infinite;`

Then use like so:

<Bar>I pulse</Bar>