Use keyframes property with React using inline style

injectStyle.js

const injectStyle = (style) => {
  const styleElement = document.createElement('style');
  let styleSheet = null;

  document.head.appendChild(styleElement);

  styleSheet = styleElement.sheet;

  styleSheet.insertRule(style, styleSheet.cssRules.length);
};

export default injectStyle;

SampleComponent.js

import React from 'react';
import injectStyle from './path/to/injectStyle';

export default class SampleComponent extends React.Component {
  constructor(props) {
    super(props);
    
    const keyframesStyle = `
      @-webkit-keyframes pulse {
        0%   { background-color: #fecd6d; }
        25%  { background-color: #ef7b88; }
        50%  { background-color: #acdacf; }
        75%  { background-color: #87c3db; }
        100% { background-color: #fecd6d; }
      }
    `;
    injectStyle(keyframesStyle);
    
    this.state.style = {
      container: {
        WebkitAnimation: 'pulse 10s linear infinite',
      },
      title: {
        fontSize: '2rem',
      },
    }
  }

  render() {
    const { style } = this.state;
    
    return (
      <div style={style.container}>
        <h3 style={style.title}>Hello world using React!</h3>
      </div>
    );
  }
}