Keyframes with Inline Styles ReactJS
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.
import styled, { keyframes } from 'styled-components'const pulse = keyframes` from { background-color: #001F3F; } to { background-color: #FF4136; }`const Bar = styled.div` color: #000; padding: 1em 0; font-size: 20px, text-align: center; cursor: pointer; position: fixed; bottom: '0', width: 100%; z-index: 10; animation: ${pulse} 1.2s ease-in-out; animation-iteration-count: infinite;`
Then use like so:
<Bar>I pulse</Bar>