title: Div transform and rotate animations in React.js/html/css
body: <p>I want to animate the divs in HTML and CSS as shown in the video<a href="https://photos.app.goo.gl/btyEdXZsbxdEiLPu8" rel="nofollow noreferrer">Please find Video here</a>. I had tried something but it is not working as my divs have 2 types of animation at a time. Please help with it. Thanks in advance.
  My code snippet is - </p>
  
  <pre><code>&lt;div className="container"&gt;
      &lt;div className="content"&gt;R&lt;/div&gt;
      &lt;div className="content"&gt;E&lt;/div&gt;
      &lt;div className="content"&gt;D&lt;/div&gt;
      &lt;div className="content"&gt;B&lt;/div&gt;
      &lt;div className="content"&gt;O&lt;/div&gt;
      &lt;div className="content"&gt;O&lt;/div&gt;
      &lt;div className="content"&gt;K&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And CSS file is  - </p>
  
  <pre><code>div.container {
    height: 200px;
    border: 2px solid #ddd;
    padding: 5px;
    display: inline-block;
  }
  div.stone {
    height: 20px;
    width: 20px;
    border: 1px solid #bbb;
    border-radius: 4px;
    display: inline-block;
    float: left;
    margin-left: 5px;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    background-color: #fa7878;
    -webkit-animation: spin 1s linear;
    -moz-animation: spin 1s linear;
    animation: spin 1s linear;
  }
  
  @-moz-keyframes spin {
    0% {
      -moz-transform: rotate(360deg);
    }
  }
  
  @-webkit-keyframes spin {
    10% {
      -webkit-transform: rotate(360deg);
    }
  }
  
  @keyframes spin {
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  div.stone:first-child {
    // sepatrate animation code
  }
  </code></pre>