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>

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>