Html 旋转变换在媒体查询中不起作用

我有一个旋转动画，我象征着有东西正在加载。这很好用（除了它不会连续旋转，当它旋转360度时会停止），但在一些手机上（我有一个android note 4），它根本不会旋转。然后在其他人（iPhone）上，我的圆圈实际上像在摆动一样旋转，或者它固定在圆圈的一个角上，并从该轴旋转

我的代码中有WebKit，我将img设置为：

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

为什么我的形象会做这些事情。如果你想在移动环境中看到它，我可以给你一个网址让你看到它

#旋转圆容器{
浮动：左；
宽度：40%；
背景：红色；
填充：140px 0 10%；
}
#旋转圈{
动画名称：旋转圆；
动画持续时间：4s；
动画迭代次数：无限；
宽度：100px；
高度：100px；
}
#旋转圆img{
宽度：100%；
高度：自动；
}
@-webkit关键帧旋转圆{
0% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}
#旋转圈标题{
填充顶部：35px；
颜色：#000；
字号：2.8em；
}
@媒体屏幕和屏幕（最大宽度：640像素）{
#旋转圆容器{
宽度：80%；
填充：40px06%；
}
#旋转圈{
动画名称：旋转圆；
动画持续时间：4s；
动画迭代次数：无限；
宽度：50px；
高度：50px；
}
#旋转圆img{
宽度：100%；
高度：自动；
}
@-webkit关键帧旋转圆{
0% {
-webkit变换：旋转（0度）；
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
-webkit变换：旋转（360度）；
}
}
#旋转圈标题{
填充顶部：35px；
颜色：蓝色；
字号：1.5em；
}
}

加载。。。

您必须添加

动画计时功能：线性在动画定义中。
这里有一个代码在工作

--编辑--

你也有

@-webkit-keyframes spinning-circle {
    0% {
        -webkit-transform: rotate(0deg) ;
        -webkit-transform: rotate(0deg) ;
    }
    100% {
        -webkit-transform: rotate(360deg) ;
        -webkit-transform: rotate(360deg) ;
    }
}

您只定义webkit的转换。改为

@-webkit-keyframes spinning-circle {
    0% {
        -webkit-transform: rotate(0deg) ;
        transform: rotate(0deg) ;
    }
    100% {
        -webkit-transform: rotate(360deg) ;
        transform: rotate(360deg) ;
    }
}

这里有更新的代码。它在我的Android上工作

您还可以添加
-ms transform
以支持IE

您需要在带前缀的
@webkit keyframes
中使用带前缀的
-webkit transform
，在不带前缀的
@keyframes
中使用不带前缀的
transform
。您还需要添加前缀
-webkit动画
如果希望动画不会在结尾停止，可以使用
动画计时功能：linear
，但动画将具有恒定的速度
您不需要在
@media screen{}
中复制
@关键帧
和其他属性

#旋转圆容器{
浮动：左；
宽度：40%；
背景：红色；
填充：140px 0 10%；
}
#旋转圈{
-webkit动画：旋转圆线性2s无限；
动画：旋转圆线性2s无限；
宽度：100px；
高度：100px；
}
#旋转圆img{
宽度：100%；
高度：自动；
}
#旋转圈标题{
填充顶部：35px；
颜色：#000；
字号：2.8em；
}
@媒体屏幕和屏幕（最大宽度：640像素）{
#旋转圆容器{
宽度：80%；
填充：40px06%；
}
#旋转圈{
宽度：50px；
高度：50px；
}
#旋转圈标题{
颜色：蓝色；
字号：1.5em；
}
}
@-webkit关键帧旋转圆{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
@旋转圆的关键帧{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}

加载。。。
主样式的第731-733行和第1391-1393行。css
似乎是导致摆动问题的原因

应该是

*::after, *::before {
    content: '';
    display: table;
}

假设您正在尝试使用clearfix方法
，感谢它让它工作得更顺利，但它仍然无法在我的android手机上的640视口中工作。仍然没有任何效果。我刚才注意到了这一点，并尝试从媒体查询中完全删除关键帧，这样它就从主css中提取了代码，但这没有帮助，不幸的是，这个解决方案也没有帮助。它所在的网站是。。您将在绿色部分看到它。@DavidRosa已在变换的非webkit属性中添加，但仍需要关键帧定义本身的非webkit版本
@keyframes spinning cricle{
@你的意思是什么？检查这里的
@keyframes
声明：+1，指出动画定义不需要在媒体查询中。（你只需要在媒体查询中添加
动画名称：spinning circle
和其他规则）@ingridly在这种情况下，我不需要，它是一个重复的字符串。对不起，你不需要什么？（我不是建议更改你的答案，我只是向OP澄清这是正确的）。这在我手机的chrome浏览器上工作，但仍然不是我的naitive android浏览器。同样在chrome（在我的手机上），圆圈仍在旋转，就像它固定在左上角一样。@您刚才说：“您只需要在媒体查询中添加
动画名称：旋转圆圈
和其他规则即可”。在这种情况下，我不需要在媒体查询中复制此属性，因为在这两种情况下都可以使用相同的动画。
*::after, *::before {
    content: '';
    display: table;
}