Html 设置图像动画以使其在圆中旋转

我正在处理图像变换、旋转和关键帧，但我在尝试使图像旋转成一个圆时遇到了一些问题。我将其设置为旋转360度和两个关键帧0和100。我希望图像从图像的中心点旋转，这样看起来好像加载圆正在加载某个东西

现在，图像似乎从左上角旋转

有人知道我做错了什么吗

#旋转圆{
动画名称：旋转圆；
动画持续时间：10秒；
动画迭代次数：无限；
宽度：40px；
高度：40px；
}
@-webkit关键帧旋转圆{
0% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}

添加

适合你的风格

---

它在偏移量上旋转，因为图像比容器大。如果要移动变换原点，请使用属性

您需要为其指定一个

变换原点

属性

#旋转圆{
动画名称：旋转圆；
动画持续时间：5s；
动画迭代次数：无限；
宽度：40px；
高度：40px；
}
@-webkit关键帧旋转圆{
0% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换来源：125%125%；
变换原点：125%125%；
}
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
-webkit转换来源：125%125%；
变换原点：125%125%；
}
}

为什么我需要给它提供来源？没有它也行。在这种情况下，目的是什么。@Becky如果你想保持图像的自然高度/宽度，你必须拥有它。你知道如何使图像在最后不会变慢吗？所以它是以恒定速度运行的？@Sam您需要将

动画计时功能

属性添加到

#spinning circle

中，并为其提供

线性

而不是默认的

轻松

#spinning-circle img {
  width: 100%;
  height: auto;
}