带有图像的 Holo 微调器示例不起作用，而纯 CSS 可以答案

【问题标题】：Holo spinner example with images doesn't work while pure CSS does带有图像的 Holo 微调器示例不起作用，而纯 CSS 可以
【发布时间】：2015-07-02 18:42:20
【问题描述】：

与此问题相关：Android Holo loading spinner in CSS 我注意到接受的答案的第一个示例，即带有图像的示例，不适用于 chrome（我只看到一个静态灰色环），而它适用于 Firefox 和 IE 11。

尽管问题的目的是制作一个没有图像的微调器，而且两者都非常好，但我发现第一个看起来更好看（即在 Firefox 上），我想使用它，但我不知道为什么它在 chrome 上不起作用，我想知道是否有修复，以供将来参考（所以我知道要避免什么和/或如何修复它）以及是否必须坚持没有图像的那个

我的 Chrome 版本是 42.0.2311.90（32 位）

【问题讨论】：

我只是看看 jsfiddle (jsfiddle.net/MattiasBuelens/pTvmW)，它工作正常。我不知道为什么它不适合你。我的 chrome 版本是：42.0.2311.90（64 位）。如果您查看此处，我知道使用 Google Chrome 为 css 设置动画存在问题：productforums.google.com/forum/#!topic/chrome/w4YlFvEMQNw 我认为这取决于您的操作系统。
这是有效的 jsfiddle（纯 CSS），试试这个：jsfiddle.net/MattiasBuelens/T2XAx 我检查了所有在您链接的讨论中报告为无效的示例，它们都对我有用。我正在运行 Windows 7 64 位，ATI 显卡（在讨论中看到有人说这可能是由 Nvidia 驱动程序引起的）

标签： css google-chrome css-animations

【解决方案1】：

因为我认为两个微调器都是正确的，所以我没有意识到它缺少 webkit-keyframes 属性。今天我再次观看了 css，偶然发现 css 微调器有它，而基于图像的微调器没有。将此添加到基于图像的微调器 css 工作

@-webkit-keyframes rotate-outer {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(1080deg);
    }
}

@-webkit-keyframes rotate-inner {
    0% {
        -webkit-transform: rotate(720deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

【讨论】：