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

const NewRelpyheButton = ({style = {}, open, handleOPenSettings}) => {

    var bar = {
    color: '#000',
    padding: '1em 0',
    fontSize: '20px',
    textAlign: 'center',
    cursor: 'pointer',
    position: 'fixed',
    bottom: '0',
    width: '100%',
    zIndex: '10',
    animation: 'pulse 1.2s ease-in-out',
    animationIterationCount: 'infinite',
    }

    Object.assign(style, {});
    let openModal;
    if (open) {
        openModal = <Modal><NewRelpyhe/></Modal>
    }

    return (
        <div>
        {openModal}
        <Bar color='purple' style={bar} onClick={handleOpenSettings}>
            create a new relphye site
        </Bar></div>
    )
}

I'm trying to mimic this in css:

.element {
  width: 100%;
  height: 100%;
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

html,
body {
  height: 100%;
}

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>