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

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
}