CSS 过渡和转换的正确前缀组合是什么？

Question

为了覆盖最广泛的浏览器和版本，添加此 CSS 前缀的正确方法是什么？

版本 1：

-webkit-transition: -webkit-transform .3s ease-in-out;
   -moz-transition:    -moz-transform .3s ease-in-out;
    -ms-transition:     -ms-transform .3s ease-in-out;
     -o-transition:      -o-transform .3s ease-in-out;
        transition:         transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

或版本 2：

-webkit-transition: transform .3s ease-in-out;
   -moz-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
     -o-transition: transform .3s ease-in-out;
        transition  transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

在我看来，在转换中使用供应商前缀时属性，我还应该定位我要转换的供应商前缀属性。

我真的找不到任何关闭方法。

Answer 1

截至目前，如果您支持每个浏览器的前两个最新版本，以下是您需要的前缀：

-webkit-transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;

-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);

所以要回答你的问题，是的，前缀转换应该以前缀转换为目标。很确定这对于转换总是正确的（尽管对于其他属性不一定如此。Flexbox 和渐变可以是复杂的前缀，我建议你使用 Autoprefixer 来保持这些规则的直截了当）。

此外，我最喜欢的解决此类问题的方法是在CodePen中打开一个新的Pen，在CSS设置中打开Autoprefixer，粘贴我的代码，然后编译它。 Autoprefixer 自动为每个浏览器的前两个添加前缀。有点神奇！

Answer 2

正如我在 ...

中提到的

This is one of those cases where vendor prefixes for standardized features become extremely problematic, because you need to account for all the different prefixed and/or unprefixed implementations of different features in different versions of different browsers.

What a mouthful. And then you have to combine various permutations of these. What a handful.

In short, you need to figure out which versions of each browser requires a prefix for each of the individual properties, and unless you don't mind the bloat, you will need to apply the prefixes differently for individual browsers.

链接的问题指的是动画而不是过渡，这会导致显着不同的符号，但是这两个功能都经历了类似的取消前缀过程 AFAIK。也就是说，这里是 caniuse.com 中 2D transforms and transitions.

的兼容性表

换句话说，仅仅因为一个功能在一个浏览器的一个版本中有前缀并不意味着另一个功能也必然在同一浏览器的同一版本中有前缀。例如，Chrome 无前缀转换在无前缀转换 (36) 之前至少转换十个主要版本 (26)，而 Safari still 需要转换前缀。因此，您肯定必须要有此声明：

transition: -webkit-transform .3s ease-in-out;

如果你绝对需要，你将不得不使用以下内容覆盖更旧的版本：

-webkit-transition: -webkit-transform .3s ease-in-out;

其他浏览器奇迹般地能够同时取消转换和转换（以及动画）的前缀，这使事情变得容易得多：

-ms-transition 仅供 IE10 的预发布版本使用，该版本早已过期。没有其他版本的 IE 使用带前缀的转换，因此您应该删除该特定的转换前缀。

-ms-transform带前缀的只有IE9使用； IE10 及更高版本附带无前缀转换。但是出于优雅降级的目的，您可能希望保留 -ms-transform: rotateX(-30deg); 声明 — 请记住，它不能被转换，因为 IE9 不支持 CSS 转换或动画。
-moz-transition 和 -moz-transform 被 Firefox 使用直到并包括 15，然后在 16 中没有前缀。
-o-transition 和 -o-transform 在 12.00 之前被 Opera 使用，然后在 12.10 中取消前缀，然后在更高版本中重新添加前缀为 -webkit-它移动到闪烁。

总而言之，根据 caniuse.com 提供的信息（我相信大部分信息是最新且准确的），这里是您需要的所有前缀：

-webkit-transition: -webkit-transform .3s ease-in-out; /* Chrome < 26, Safari < 7 */
   -moz-transition:    -moz-transform .3s ease-in-out; /* Firefox < 16 */
     -o-transition:      -o-transform .3s ease-in-out; /* Opera < 12.10 */
        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg); /* Only for graceful degradation in IE9, cannot be transitioned */
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

在撰写本文时，您需要支持每个浏览器的最新版本的最低要求是：

        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

如评论中所述，您可以使用 Autoprefixer 等工具根据您需要的浏览器支持级别自动执行此操作。但是，对于那些喜欢手动编写 CSS 的人，或者对于那些只是想知道哪些浏览器到底需要哪些前缀的人来说，就是这样。

最后一点：注意到上面示例中的两个无前缀的 transition 声明了吗？现在，您会认为将它们组合成一个声明就足够简单了：

transition: -webkit-transform .3s ease-in-out, transform .3s ease-in-out;

但是，不幸的是，Chrome will erroneously completely ignore this declaration，而其他浏览器会很好地应用它。

Answer 3

最终，仅仅为了支持旧版本的自动更新浏览器而让您的网页加载速度变慢是愚蠢的。而且，对于 IE，动画的 ms 前缀仅用于预发布版本。因此，所有合理的人都需要支持 Safari 的 webkiting 转换。

transition: transform .3s ease-in-out;
/*you can put -webkit-transform below, but that will only waste space*/
transition: -webkit-transform .3s ease-in-out;

transform: rotateX(-30deg);
-webkit-transform: rotateX(-30deg);

Voilà：它具有与所有那些重前缀相同的 IE 兼容性，同时保持对最新版本的自动更新浏览器的支持。如果您真的觉得有必要为那 .001% 的继续延迟浏览器更新的人提供支持，那么只需在屏幕底部放一条小消息，告诉用户如果需要，请单击浏览器中的更新按钮页面显示不正确

CSS 过渡和转换的正确前缀组合是什么？

What is the right combination of prefixes for CSS transitions and transforms?

css

css-transitions

css-transforms

vendor-prefix