html - CSS动画延迟到子div

Question

我需要将动画延迟设置为单个圆圈（div.unit-1、unit-2、unit-3、unit-4）。我试图为每个单元设置动画延迟，但没有任何反应。另外，我尝试为每个单元设置动画，但实际上，它不起作用，因为我希望将 transform-origin 作为文档主体中心。

下面你可以看到我的代码。请支持。先感谢您。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#spin {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}

.frta1, .frta2, .frta3, .frta4 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;        
    position: relative;
}

.frta1 {
    animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
    transform-origin: center right;
}

.frta2 {
    animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
    transform-origin: center left;
}

.frta3 {
    animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
    transform-origin: center right;
}

.frta4 {
    animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
    transform-origin: center left;
}

.division-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    transform: rotateZ(90deg);
}

.division-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.unit-1 {
    width: 60px;
    height: 60px;
    margin: 5px;
    border-radius: 50%;
}
.unit-2 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 4px;
}
.unit-3 {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 3px;
}
.unit-4 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 15px;
}

    <div id="spin">
        <div class="division-1">
            <div class="frta1">
                <div class="unit-1" style="background-color: #333;"></div>
                <div class="unit-2" style="background-color: #333;"></div>
                <div class="unit-3" style="background-color: #333;"></div>
                <div class="unit-4" style="background-color: #333;"></div>
            </div>
            <div class="frta2">
                <div class="unit-4" style="background-color: rgb(231, 0, 77);"></div>
                <div class="unit-3" style="background-color: rgb(231, 0, 77);"></div>
                <div class="unit-2" style="background-color: rgb(231, 0, 77);"></div>
                <div class="unit-1" style="background-color: rgb(231, 0, 77);"></div>
            </div>
        </div>
        <div class="division-2">
            <div class="frta3">
                <div class="unit-1" style="background-color: rgb(58, 23, 255);"></div>
                <div class="unit-2" style="background-color: rgb(58, 23, 255);"></div>
                <div class="unit-3" style="background-color: rgb(58, 23, 255);"></div>
                <div class="unit-4" style="background-color: rgb(58, 23, 255);"></div>
            </div>
            <div class="frta4">
                <div class="unit-4" style="background-color: rgb(10, 163, 17);"></div>
                <div class="unit-3" style="background-color: rgb(10, 163, 17);"></div>
                <div class="unit-2" style="background-color: rgb(10, 163, 17);"></div>
                <div class="unit-1" style="background-color: rgb(10, 163, 17);"></div>
            </div>
        </div>
    </div>

标签： htmlcsscss-animations

Answer 1

这是一个代码更少的优化版本：

#spin {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width: 300px;
  height:300px;
  display:flex;
  background: /* we define the circles once here */
     radial-gradient(farthest-side,rgb(10, 163, 17) 97%,transparent) top    left,
     radial-gradient(farthest-side,rgb(58, 23, 255) 97%,transparent) top    right,
     radial-gradient(farthest-side,rgb(231, 0, 77)  97%,transparent) bottom left,
     radial-gradient(farthest-side,#333             97%,transparent) bottom right;
  background-size: 60px 60px;
  background-repeat:no-repeat;
  animation: spin 5s cubic-bezier(.8, 0, .2, 1) infinite;
}
#spin div {
   display:flex;
   flex:1;
   background:inherit;
   margin:60px;
   background-size: 40px 40px;
  animation: delay 0.6s infinite alternate ease-out;
   transform:rotate(30deg); /* this will control your delay */
}
#spin > div > div {
   margin:40px;
   background-size: 20px 20px;
}
#spin > div > div > div {
   margin:30px;
   background-size: 10px 10px;
}

@keyframes spin {
  0%   {transform: rotate(0deg);}
  25%  {transform: rotate(90deg);}
  50%  {transform: rotate(180deg);}
  75%  {transform: rotate(270deg);}
  100% {transform: rotate(360deg);}
}
@keyframes delay {
  from {
    transform:translate(0);
  }
}

<div id="spin">
  <div>
     <div>
      <div>
     </div>
   </div>
  </div>
</div>

如下所示，百分比值：

#spin {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width: 300px;
  height:300px;
  display:flex;
  background: /* we define the circles once here */
     radial-gradient(farthest-side,rgb(10, 163, 17) 97%,transparent) top    left,
     radial-gradient(farthest-side,rgb(58, 23, 255) 97%,transparent) top    right,
     radial-gradient(farthest-side,rgb(231, 0, 77)  97%,transparent) bottom left,
     radial-gradient(farthest-side,#333             97%,transparent) bottom right;
  background-size: 23% 23%;
  background-repeat:no-repeat;
  animation: spin 5s cubic-bezier(.8, 0, .2, 1) infinite;
}
#spin div {
   display:flex;
   flex:1;
   background:inherit;
   margin:25%;
   transform:rotate(30deg); /* this will control your delay */
  animation: delay 0.6s infinite alternate ease-out;
}

@keyframes spin {
  0%   {transform: rotate(0deg);}
  25%  {transform: rotate(90deg);}
  50%  {transform: rotate(180deg);}
  75%  {transform: rotate(270deg);}
  100% {transform: rotate(360deg);}
}
@keyframes delay {
  from {
    transform:translate(0);
  }
}

<div id="spin">
  <div>
     <div>
      <div>
     </div>
   </div>
  </div>
</div>