html - React.js/html/css 中的 Div 变换和旋转动画

Question

我想在 HTML 和 CSS 中为 div 设置动画，如视频中所示请在此处找到视频。我尝试了一些东西，但它不起作用，因为我的 div 一次有 2 种类型的动画。请帮忙。提前致谢。我的代码片段是 -

<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>

CSS文件是-

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
}

标签： htmlcssreactjs