Html 如何避免在css中的子对象上层叠动画（@keyframe）？

您知道如何避免子div不与父div一起设置动画吗

@关键帧旋转
{
从{
变换：旋转（0度）
}
到{
变换：旋转（360度）
}
}
.梯度{
宽度：200px；
高度：200px；
位置：相对位置；
顶部：100px；
保证金：0自动；
边框：20px实心rgba（0,0,0,0）；
边界半径：50%；
-webkit边界半径：50%；
背景图像：线性梯度（白色，白色），线性梯度（#ff0000，#0000ff）；
背景来源：边框框；
背景剪辑：内容框、边框框；
动画：旋转5s无限线性；
}
.梯度项目{
位置：绝对位置；
最高：50%；
左：50%；
宽度：30px；
高度：30px；
边界半径：50%；
-webkit边界半径：50%；
利润率：-15px；
背景色：#999999；
}

---

在gradient div中为动画创建新元素

<div class="gradient_animation"></div>

如果小圆圈不与父圆圈一起旋转，它们应该坐在哪里？固定在它们的位置不客气！别担心。。这都是关于互相帮助的：）