-webkit- 动画前缀

Question

我看到一些 CSS 在 @keyframes 和 @-0webkit-keyframes 中都使用了 -webkit- 前缀。

我说的是 animate.css

这是必需的吗？

Answer 1

在这些浏览器中 @keyframes 和 animation* 都需要 -webkit- 前缀：

Chrome  <= 42
Firefox <= 15
Safari  <= 8
Opera   <= 29
Safari&Chrome (iOS) <= 8.4
Android browser <= 4.4.4

让我们以这段代码为例：

.animated {
    animation-duration: 1s;
}

此代码适用于 IE 11 和 Firefox 37，但不适用于 Chrome 40，不适用于 Safari 7。

如果您将代码更改为：

.animated {
    -webkit-animation-duration: 1s;
}

此代码将在最新版本的 chrome/firefox/safari 中运行，但在 IE 10 中将被忽略。

这就是为什么建议同时使用这两个选项的原因：

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

同样适用于 @keyframes 和 @-webkit-keyframes。

如果您只关心新的最新版本，您可以避免使用 -webkit- 前缀。否则我建议同时使用这两个版本。