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

Question

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

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

我的 Chrome 版本是 42.0.2311.90（32 位）

Answer 1

因为我假设两个微调器都是正确的，所以我没有意识到它缺少 webkit 关键帧属性。今天我再次观看 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);
    }
}

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

Holo spinner example with images doesn't work while pure CSS does

css

google-chrome

css-animations