title: How to apply 'keyframes' css to a specific class in React Component?
body: <p>I have a react component called <code>ComingSoon</code>. This is a component of other components of my React application.</p>
  <pre><code>import React, { Component } from 'react';
  import '../Styles/ComingSoon.css';
  
  class ComingSoon extends Component {
      constructor(props) {
          super(props);
  
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;div className=&quot;comingSoon-container&quot;&gt;
                      &lt;span className=&quot;comingSoon-text1&quot;&gt;Coming&lt;/span&gt;
                      &lt;span className=&quot;comingSoon-text2&quot;&gt;Soon&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default ComingSoon;
  </code></pre>
  <p>This is my CSS for that component with filename <code>ComingSoon.css</code>:</p>
  <pre><code>.comingSoon-container {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
  }
  
  .comingSoon-container span {
      text-transform: uppercase;
      display: block;
  }
  
  .comingSoon-text1 {
      color: black;
      font-size: 65px;
      font-weight: 700;
      letter-spacing: 12px;
      margin-bottom: 20px;
      background: white;
      position: relative;
      animation: text 3s 1;
  }
  
  .comingSoon-text2 {
      font-size: 50px;
      color: #2b8bc6;
  }
  
  @keyframes text {
      0% {
          color: white;
          margin-bottom: -60px;
      }
      30% {
          letter-spacing: 30px;
          margin-bottom: -60px;
      }
      85% {
          letter-spacing: 12px;
          margin-bottom: -60px;
      }
  }
  </code></pre>
  <p>How do I make sure the CSS style of <code>@keyframes text</code> doesn't apply to other components of my application and just apply to this specific component for contents with className <code>comingSoon-container</code>.</p>