Keyframes with Inline Styles ReactJS
<p>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.</p>

<p><a href="https://www.dropbox.com/s/ca2gyq337zqmwal/Screenshot%202016-05-25%2015.48.36.png?dl=0" rel="noreferrer">My code</a></p>

<pre><code>const NewRelpyheButton = ({style = {}, open, handleOPenSettings}) =&gt; {

    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 = &lt;Modal&gt;&lt;NewRelpyhe/&gt;&lt;/Modal&gt;
    }

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

<p>I'm trying to mimic <a href="http://codepen.io/team/css-tricks/pen/ZGYZBx" rel="noreferrer">this</a> in css:</p>

<pre><code>.element {
  width: 100%;
  height: 100%;
  animation: pulse 5s infinite;
}

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

html,
body {
  height: 100%;
}
</code></pre>