Keyframes with Inline Styles ReactJS

Question

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

<

Answer 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.

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>