Javascript 对加载的div设置动画，然后在父div内旋转

我在我的网站上制作了一个简单的技能块。我有一个关于父div的skillsweel类，然后我有一个带有h2的内部div和一个技能类。skillsWheel还包括另外8个具有一个技能等级的div。我有skills div，所有的skills div都集中在skillsWheel中，只有skills div显示，skills div隐藏在skills div后面。我希望skills div在页面加载时显示动画，围绕skills div做一个圆圈，然后开始按时钟或反时钟旋转，或者两者都旋转。你知道我要做什么才能做到这一点吗？到目前为止，我已经做了很多

.skillsweel{
宽度：500px；
高度：500px；
背景#d7d7d7；
框大小：边框框；
填充：15px；
位置：相对位置；
}
div{
颜色：#fff；
边界半径：50%；
}
.技能{
高度：70像素；
宽度：70px；
背景：深红色；
线高：70px；
文本对齐：居中；
边界半径：50%；
位置：绝对位置；
最高：50%；
左：50%；
利润上限：-35px；
左边距：-35px；
z指数：-5；
-webkit过渡：所有0.5s都可以轻松过渡；
过渡：所有0.5s缓解；
}
.技能：第n个孩子（2）{
最高：15%；
左：50%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（3）{
最高：25%；
左：25%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（4）{
最高：70%；
左：25%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（5）{
最高：85%；
左：50%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（6）{
最高：70%；
左：75%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（7）{
最高：45%；
左：85%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（8）{
最高：25%；
左：75%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（9）{
最高：45%；
左：15%；
左边距：-40px；
z指数：1；
}
.主要技能{
宽度：100px；
高度：100px；
背景:#98bf21；
文本对齐：居中；
边界半径：50%；
垂直对齐：中间对齐；
位置：绝对位置；
最高：50%；
左：50%；
利润上限：-50px；
左边距：-50px；
}
.主要技能h5{
字体大小：22px；
}

JS-Bin
技能
HTML
CSS
JavaScript
jQuery
无礼
独自创立
吉特
Photoshop

只需添加一个关键帧（确保使用前缀以实现交叉兼容性）

使用class

skill\u container

创建一个div，并在其中添加所有

skill

container

并使用

skill

类将动画规则添加到容器中（也需要前缀）

下面的片段

$（文档）.ready（函数（）{
$（“.skill”）.css({
宽度：“70px”，
高度：“70px”
})
})

.skillsweel{
宽度：500px；
高度：500px；
背景#d7d7d7；
框大小：边框框；
填充：15px；
位置：相对位置；
}
div{
颜色：#fff；
边界半径：50%；
}
.技能{
高度：70像素；
宽度：70px；
背景：深红色；
线高：70px；
文本对齐：居中；
边界半径：50%；
位置：绝对位置；
最高：50%；
左：50%；
利润上限：-35px；
左边距：-35px；
z指数：-5；
-webkit过渡：所有0.5s都可以轻松过渡；
过渡：所有0.5s缓解；
}
.技能：第n个孩子（2）{
最高：15%；
左：50%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（3）{
最高：25%；
左：25%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（4）{
最高：70%；
左：25%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（5）{
最高：85%；
左：50%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（6）{
最高：70%；
左：75%；
左边距：-40px；
z指数：1；
}
1.2.1集装箱{
位置：绝对位置；
宽度：100%；
身高：100%；
动画名称：旋转；
动画持续时间：5s；
动画迭代次数：无限；
动画填充模式：正向；
}
.技能：第n个孩子（7）{
最高：45%；
左：85%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（8）{
最高：25%；
左：75%；
左边距：-40px；
z指数：1；
}
.技能：第n个孩子（9）{
最高：45%；
左：15%；
左边距：-40px；
z指数：1；
}
.主要技能{
宽度：100px；
高度：100px；
背景:#98bf21；
文本对齐：居中；
边界半径：50%；
垂直对齐：中间对齐；
位置：绝对位置；
最高：50%；
左：50%；
利润上限：-50px；
左边距：-50px；
}
.主要技能h5{
字体大小：22px；
}
@关键帧旋转{
从{
变换：旋转（0度）
}
到{
变换：旋转（360度）
}
}

技能
HTML
CSS
JavaScript
jQuery
无礼
独自创立
吉特
Photoshop

因为我相信我必须添加javascript才能在页面加载时将类添加到各个div中。只需创建一个css类显示，并通过在window.onload中括起来将其添加到第一个技能div中，看看它是否有效，但没有运气。这就是为什么我刚刚澄清了这一部分，包括你在你的问题中尝试了什么？标签也必须旋转？是的，整个技能div应该旋转，所有技能div，但没有带标签skills的centresd div感谢你的帮助，但我希望技能div围绕着大的圆形div旋转。就像他们的位置应该改变一样。

@keyframes rotate{
from {
transform:rotate(0deg)
}
to{
transform:rotate(360deg)
}
}

 animation-name:rotate;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-fill-mode:forwards;