title: Keyframes with Inline Styles ReactJS
body: <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>