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

我有下面的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+ */
}

请注意我不是要求使用autoprefixer之类的东西来为我做这个,但我需要添加到我的混音中以使其与最广泛的浏览器兼容？

这是标准化功能的供应商前缀变得非常棘手的情况之一,因为您需要考虑不同浏览器的不同版本中不同功能的所有不同的前缀和/或前缀固定的实现.

多么满口.然后你必须结合这些的各种排列.真是太少了.

简而言之,您需要确定每个浏览器的哪个版本需要为每个单独的属性添加前缀,除非您不介意膨胀,否则您需要为各个浏览器应用不同的前缀.幸运的是,这部分内容非常简单,通过最新资源,caniuse.com; 这是2D变换和动画的兼容性表.

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

IE9已经实现-ms-transform,并且只是开始在IE10中实现动画,RTM具有稳定的前缀语法以及前缀变换.IE显然是唯一一个在动画中添加前缀变换的浏览器毫无意义,因为除了作为唯一需要变换前缀的浏览器之外,IE9无论如何都不会识别CSS动画.

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

Firefox -moz-transform早在3.5版就已发布,动画在版本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);
    }
}

如果你使用带有前缀参数的mixin,并且在每个@keyframes规则中将相应的前缀传递给mixin,你可以大大减少膨胀,但这可能超出了这个问题的范围(但这主要是因为我不是真的知道Sass).