css - 你应该如何为 CSS3 动画中的变换属性添加前缀？

Question

我有下面的 Sass 代码片段，效果很好，但我想知道我是否需要为我的转换属性添加前缀，如果需要，怎么办？ (如果不是，为什么不呢？)

@mixin expand-o-band() {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2); }
}

@-webkit-keyframes expand-o-band { @include expand-o-band(); }
@-moz-keyframes expand-o-band { @include expand-o-band(); }
@-o-keyframes expand-o-band { @include expand-o-band(); }
@keyframes expand-o-band { @include expand-o-band(); }


.circle-thing {
    -webkit-animation: expand-o-band 1.5s infinite; /* Safari 4+ */
    -moz-animation:    expand-o-band 1.5s infinite; /* Fx 5+ */
    -o-animation:      expand-o-band 1.5s infinite; /* Opera 12+ */
    animation:         expand-o-band 1.5s infinite; /* IE 10+, Fx 29+ */
}

请注意，我不是在询问使用自动前缀等工具来为我执行此操作，而是我需要向我的混合中添加什么才能使其与最广泛的浏览器兼容？

Answer 1

这是标准化功能的供应商前缀变得极度问题的情况之一，因为您需要考虑不同浏览器的不同版本中不同功能的所有不同前缀和/或无前缀实现.

真是一口。然后你必须组合这些的各种排列。多么一把。

简而言之，您需要弄清楚每个浏览器的哪些版本需要为每个单独的属性添加前缀，除非您不介意膨胀，否则您需要为各个浏览器应用不同的前缀。幸运的是，出色的最新资源 caniuse.com 使这部分变得非常容易；这是 2D transforms 的兼容性表和 animations .

好消息是浏览器在实现转换和动画的稳定(即无前缀)实现方面通常非常一致:

• IE9 实现了 -ms-transform，并且在 IE10 中才开始使用 RTM 的稳定无前缀语法以及无前缀转换实现动画。 IE 是唯一一个在动画中添加前缀转换毫无意义的浏览器，因为除了作为唯一一个需要转换前缀的浏览器之外，IE9 根本无法识别 CSS 动画。

  当然，这不会阻止您在其他地方使用 -ms-transform 并将动画作为一种渐进增强的形式，但是将它包含在 动画中是没有意义的.此外，您可能已经阅读过关于 @-ms-keyframes 前缀的内容，但它仅用于 IE10 的预发布版本，该版本早已过期并且无论如何都不会再运行。

• Firefox 早在 3.5 版就提供了 -moz-transform，动画在版本 5 中出现的时间要晚得多，然后在版本 16 中同时删除了这两个功能的前缀。

• 如今，基于 WebKit 的浏览器(包括 Opera 15 及更高版本)仍然需要 -webkit- 前缀来显示动画，而转换仅在最新版本的 Chrome 中取消了前缀。这两个功能都需要前缀。

• Opera 12.00 是唯一使用@-o-keyframes 的版本。 -o-transform 也用于该版本。 12.10 删除了两者的前缀，然后它直接退化为通过移动到版本 15 中的 WebKit 再次要求这两个前缀，如上所述。

不幸的是，由于您的 CSS 动画中有所有这些前缀，并且您对所有这些都使用了相同的 mixin，因此您的 CSS 转换需要同样多的前缀才能使带前缀的动画真正有用:

@mixin expand-o-band() {
    0%   {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
    }
}

如果你使用一个带有前缀参数的混入，并在你的每个 @keyframes 规则中将适当的前缀传递给混入，你可以大大减少膨胀，但这可能超出了这个问题(但主要是因为我不太了解 Sass)。