title: React how to specify animation @keyframes and classes locally
body: <pre><code>function Loader() {
      var style = {
          border: '16px solid #eee',
          borderTop: '16px solid #3ae',
          borderRadius: '50%',
          width: '1cm',
          height: '1cm',
          animation: 'spin 2s linear infinite',
      }
      return (
          &lt;div style={style}&gt;
          &lt;style&gt;{`
              @keyframes spin {
                   0% { transform: rotate(0deg); }
                   100% { transform: rotate(360deg); }
              }
          `}&lt;/style&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>Is there a way to specify <code>@keyframes</code> locally to the component (a component function in this example) without using an inlined string?</p>
  
  <p>Also if you specify <code>&lt;style&gt;</code> inside the component render function does it have a performance penalty if there are multiple objects of the same class (or using the same <code>@keyframes</code>)?</p>
  
  <p>The idea is to keep stuff inside <code>&lt;style&gt;</code> locally inside the component, I do not want to move it to the <code>.css</code> file, but at the same time I do not want hundreds of repeated class/keyframes definitions when only one is actually sufficient.</p>