Div transform and rotate animations in React.js/html/css

Question

I want to animate the divs in HTML and CSS as shown in the videoPlease find Video here. 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 -

<div className="container">
    <div className="content">R</div>
    <div className="content">E</div>
    <div className="content">D</div>
    <div className="content">B</div>
    <div className="content">O</div>
    <div className="content">O</div>
    <div className="content">K</div>
  </div>

And CSS file is -

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
}

I was able to rotate the divs, without jQuery ..but it is not as per video. — Samiksha Jagtap, Dec 07 '19 at 14:57
You don't need JQuery for this. You can use a comma to separate two animations under the animation css property, for example: ```animation: spin 1s, rotate 2s;```. See [this answer](https://stackoverflow.com/a/26986310/8722871) for more information. — Mick Vader, Dec 07 '19 at 16:24
Does this answer your question? [Play multiple CSS animations at the same time](https://stackoverflow.com/questions/26986129/play-multiple-css-animations-at-the-same-time) — Mick Vader, Dec 07 '19 at 16:26
without jquery you can rotate divs. But the thing is to do translate transition once in 7 seconds. The first child would be translated in the "first" second, then second child on "second" second, and so on.. That's why it needs jquery. CSS can't track and function on basis of time, but jquery could. — Ravi Garg, Dec 08 '19 at 03:38

Div transform and rotate animations in React.js/html/css

0 Answers0