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+ */
}

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

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);
    }
}

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

Answer 2

鉴于：

我没有问过使用像autoprefixer这样的东西

这取决于哪些浏览器和which versions you want to support：

-ms-可以用于IE9（完全不支持IE9以下）但是，动画仅在IE10 +中受支持，因此，如果您要动画包含ms前缀的转换是多余的

-webkit-可用于Chrome 35,31，Safari和Android浏览器

@mixin expand-o-band() {
    0%   { 
       opacity: 1; 
       -ms-transform: scale(1); /* <--- not necessary */
       -webkit-transform: scale(1); 
       transform: scale(1); 
    }
    100% { 
       opacity: 0; 
       -ms-transform: scale(2);  /* <--- not necessary */
       -webkit-transform: scale(2); 
       transform: scale(2); 
    }
}

通常强烈建议使用类似autoprefixer的解决方案，因为它们允许您编写干净的CSS，然后清楚地定义您希望支持哪些浏览器和（旧版）版本。这样做的好处是，您的源代码不太可能包含可能在以后与您（以及您的最终用户群）无关的项目，并且正确包含正确实现的担心被抽象掉。

Answer 3

简短的回答是：不要自己动手。 BoltClock已经很好地解释了为什么你的实现对于所有场景都不够好（前缀属性和前缀值）。

好消息是Compass have already solved this problem for you的好人。

@include keyframes(expand-o-band) {
    0% {
      /* prefixed property */
        @include border-radius(0);
    }

    100% {
        @include border-radius(1em);
        /* prefixed value */
        @include background(linear-gradient(to bottom, black, white));
    }
}

.circle-thing {
    @include animation(expand-o-band 1.5s infinite);
  background: yellow;
    padding: 5em;
    border: 1px solid;
}

输出：

@-moz-keyframes expand-o-band {
  0% {
    /* prefixed property */
    -moz-border-radius: 0;
    border-radius: 0;
  }
  100% {
    -moz-border-radius: 1em;
    border-radius: 1em;
    /* prefixed value */
    background: -moz-linear-gradient(top, #000000, #ffffff);
    background: linear-gradient(to bottom, #000000, #ffffff);
  }
}
@-webkit-keyframes expand-o-band {
  0% {
    /* prefixed property */
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  100% {
    -webkit-border-radius: 1em;
    border-radius: 1em;
    /* prefixed value */
    background: -webkit-linear-gradient(top, #000000, #ffffff);
    background: linear-gradient(to bottom, #000000, #ffffff);
  }
}
@keyframes expand-o-band {
  0% {
    /* prefixed property */
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  100% {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    /* prefixed value */
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #ffffff));
    background: -moz-linear-gradient(top, #000000, #ffffff);
    background: -webkit-linear-gradient(top, #000000, #ffffff);
    background: linear-gradient(to bottom, #000000, #ffffff);
  }
}
.circle-thing {
  -moz-animation: expand-o-band 1.5s infinite;
  -webkit-animation: expand-o-band 1.5s infinite;
  animation: expand-o-band 1.5s infinite;
  background: yellow;
  padding: 5em;
  border: 1px solid;
}

http://sassmeister.com/gist/2413d0894bf609e80b5d

默认情况下，Compass将最大化浏览器兼容性（和is fully configurable）。 发出前缀的所有混合符都与其关键帧mixin兼容。我甚至无法粘贴相关代码来重新创建因此而存在的魔力。

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

3 个答案: