Html CSS动画延迟到子div

我需要将动画延迟设置为单个圆（第1单元、第2单元、第3单元、第4单元）。 我试图将动画延迟设置为每个单元，但什么也没发生。 另外，我尝试为每个单元设置动画，但实际上，它不起作用，因为我希望将“变换原点”作为文档主体中心

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

*{
保证金：0；
填充：0；
框大小：边框框；
}
#旋转{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
宽度：100%；
}
@关键帧旋转{
0%{变换：旋转（0度）；}
25%{变换：旋转（90度）；}
50%{变换：旋转（180度）；}
75%{变换：旋转（270度）；}
100%{变换：旋转（360度）；}
}
.frta1、.frta2、.frta3、.frta4{
保证金：0；
填充：0；
框大小：边框框；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}
.frta1{
动画：旋转6s立方贝塞尔（.8,0,2,1）无穷大；
变换原点：中间偏右；
}
.frta2{
动画：旋转6s立方贝塞尔（.8,0,2,1）无穷大；
变换原点：左中；
}
.frta3{
动画：旋转6s立方贝塞尔（.8,0,2,1）无穷大；
变换原点：中间偏右；
}
.frta4{
动画：旋转6s立方贝塞尔（.8,0,2,1）无穷大；
变换原点：左中；
}
.第1分部{
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：绝对位置；
变换：旋转（90度）；
}
.第2分部{
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：绝对位置；
}
.第一单元{
宽度：60px；
高度：60px；
保证金：5px；
边界半径：50%；
}
.第二单元{
宽度：40px；
高度：40px；
边界半径：50%；
保证金：4倍；
}
.第三单元{
宽度：20px；
高度：20px；
边界半径：50%；
保证金：3倍；
}
.第四单元{
宽度：10px；
高度：10px；
边界半径：50%；
利润率：15px；
}

---

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

旋转{ 位置：固定； 排名：0； 左：0； 右：0； 底部：0； 保证金：自动； 宽度：300px； 高度：300px； 显示器：flex； 背景：/*我们在这里定义了一次圆*/ 径向渐变（最远侧，rgb（1016317）97%，透明）左上角， 径向渐变（最远侧，rgb（58,23255）97%，透明）右上角， 径向渐变（最远侧，rgb（231,0,77）97%，透明）左下角， 径向梯度（最远侧，#333 97%，透明）右下角； 背景尺寸：60px 60px； 背景重复：无重复； 动画：旋转5s立方贝塞尔（.8,0,2,1）无穷大； } #旋转div{ 显示器：flex； 弹性：1； 背景：继承； 利润率：60像素； 背景尺寸：40px 40px； 动画：延时0.6s无限交替缓变； 变换：旋转（30度）；/*这将控制您的延迟*/ } #旋转>分割>分割{ 利润率：40像素； 背景尺寸：20px 20px； } #旋转>分割>分割>分割>分割{ 利润率：30像素； 背景尺寸：10px 10px； } @关键帧旋转{ 0%{变换：旋转（0度）；} 25%{变换：旋转（90度）；} 50%{变换：旋转（180度）；} 75%{变换：旋转（270度）；} 100%{变换：旋转（360度）；} } @关键帧延迟{ 从{ 变换：平移（0）； } }

最终动画应该如何工作？1号机组应该在0.5秒后开始工作，2号机组应该在0.4秒后开始工作，等等。。我需要这样的帮助effect@Levan检查更新