Html 为什么旋转器不旋转/旋转？

我已经创建了一个锚链接按钮，当我在

：focus

状态下单击按钮时，我想在其中显示微调器动画。我正在使用Font-Awesome显示动画，但当我单击按钮时，微调器动画不起作用

注意：我不想在这里使用JavaScript，只想使用纯JavaScript CSS

这是代码笔链接

@导入url(https://fonts.googleapis.com/css?family=Titillium+网络）；
身体{
字体系列：“titilliumweb”，无衬线；
文本对齐：居中；
}
#钮扣{
填充：15px；
背景颜色：绿色；
颜色：#fff；
文字装饰：无；
边界半径：5px；
宽度：300px；
显示：内联块；
文本对齐：居中；
字体大小：25px；
-webkit过渡：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
}
#按钮：之前{
内容：“\f090”；
字体系列：Fontsome；
右边距：5px；
}
#按钮：焦点{
背景色：#02b402；
}
#按钮：焦点：前{
内容：“\f1ce”；
-webkit动画：旋转.8s轻松无限；
动画：旋转.8s轻松无限；
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（359度）；
变换：旋转（359度）；
}
}
@关键帧旋转{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（359度）；
变换：旋转（359度）；
}
}

点击这里

转换应该只在块级元素（包括

内联块

）上工作。将伪元素设置为

显示：内联块

可以使动画正常工作

在评论了这个问题之后，我确实看到了动画在ChromeV50（dev-m）中不起作用，而在ChromeV43中也起作用。因此，目前的行为似乎是一致的

@导入url(https://fonts.googleapis.com/css?family=Titillium+网络）；
身体{
字体系列：“titilliumweb”，无衬线；
文本对齐：居中；
}
#钮扣{
填充：15px；
背景颜色：绿色；
颜色：#fff；
文字装饰：无；
边界半径：5px；
宽度：300px；
显示：内联块；
文本对齐：居中；
字体大小：25px；
-webkit过渡：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
}
#按钮：之前{
显示：内联块；
内容：“\f090”；
字体系列：Fontsome；
右边距：5px；
}
#按钮：焦点{
背景色：#02b402；
}
#按钮：焦点：前{
内容：“\f1ce”；
-webkit动画：旋转.8s轻松无限；
动画：旋转.8s轻松无限；
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（359度）；
变换：旋转（359度）；
}
}
@关键帧旋转{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（359度）；
变换：旋转（359度）；
}
}

点击这里

它似乎工作正常（铬合金）。你使用的是什么浏览器？不工作是什么意思？我使用的是Firefox开发者edition@ketan：对不起，我没听懂。如果您的意思是在

@-webkit关键帧中存在
变换
，则需要它。Chrome的旧版本支持无前缀但不支持关键帧的变换（我认为甚至可以升级到v38或其他版本）。但是，不需要相反的方法。再想一想，我认为在
@-webkit关键帧中不应该需要未固定的
变换
，因为当未固定的变换不存在时，webkit应该能够进行
-webkit变换
。但我似乎还记得早些时候遇到过这个问题。无论如何，对于最新版本，仅标准版本就足够了：）