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

【问题标题】：What is the right combination of prefixes for CSS transitions and transforms?CSS 过渡和变换的正确前缀组合是什么？
【发布时间】：2015-06-30 15:38:51
【问题描述】：

为了覆盖最广泛的浏览器和版本，为这个 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);

在我看来，当在转换属性上使用供应商前缀时，我还应该针对我想要转换的供应商前缀属性。

我真的找不到任何解决办法。

【问题讨论】：

这只是基于意见
@Mr.Alien：所以你说没关系？
@Mr.Alien 我不同意。这似乎是一个问题，“如果我对属性使用供应商前缀，我是否也需要它作为属性？”这可以客观地回答。
所以你试了一下，结果是……？？？我怀疑需要 transform 前缀版本（有吗？）的浏览器会接受无前缀版本作为 transition 属性，但我知道什么，试试吧！
看看 Autoprefixer (github.com/postcss/autoprefixer) 做了什么

标签： css css-transitions css-transforms vendor-prefix

【解决方案1】：

正如我在very similar question 中提到的...

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

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

简而言之，您需要弄清楚每个浏览器的哪些版本需要为每个单独的属性添加前缀，除非您不介意臃肿，否则您需要为各个浏览器应用不同的前缀。

链接的问题是指动画而不是过渡，这会导致明显不同的符号，但两个功能都经历了类似的取消前缀过程 AFAIK。话虽如此，这里是来自 caniuse.com 的 2D transforms 和 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 个（包括 15 个），然后在 16 个中不加前缀。
-o-transition 和 -o-transform 在 12.00 之前被 Opera 使用，然后在 12.10 中取消前缀，然后在后来的版本中重新添加前缀为 -webkit- 以转移到 Blink。

总之，这里是您需要的所有前缀，基于 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);

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

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

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

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

【讨论】：

很好的解释！非常感谢。它并不像大多数人想象的那么简单。
@Wessel Grift：我非常感谢您为此发布这个问题。
不幸的是，多个无前缀转换声明会导致最后一个声明覆盖其他声明，无论它是否有效。在similar question中提到。
@tfE：我有点迷路了。当您说“有效”时，您的意思是“认可”吗？正如我不仅在这里提到的，而且在你链接到的问题中也提到（和我在两个地方都链接到的另一个），即使列出的所有属性都不是，转换声明也被认为是有效的认可 - 所以它应该覆盖所有前面的属性，这是设计使然。问题是在 Safari（和 Chrome 直到 2014 年之前 - Safari 仍然遇到这个问题吗？），只包含无法识别的道具的转换声明被错误地认为是无效的，因此 不覆盖。
@tfE：很高兴知道我当时确切地知道自己在做什么；）

【解决方案2】：

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

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

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

所以要回答你的问题，是的，前缀转换应该针对前缀转换。可以肯定的是，变换总是如此（尽管不一定适用于其他属性。Flexbox 和 Gradients 在前缀方面可能很复杂，我建议您使用Autoprefixer 来保持这些规则的正确性）。

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

【讨论】：

@torazaburo 可能不是，这取决于您的浏览器支持。我工作的网站仍然有很多人在使用旧的 Android 浏览器，它们确实需要 -webkit- ，并且将它们放在那里并没有什么坏处。但这是我建议使用 Autoprefixer 的另一个原因，它会在您不再需要前缀时自动删除它们。
谢谢，@BoltClock 说的差不多了。

【解决方案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 兼容性，同时保持对最新版本的自动更新浏览器的支持。如果您真的觉得有必要为持续延迟浏览器更新的 0.001% 的人提供支持，那么只需在屏幕底部放置一条小消息，告诉用户在浏览器中单击更新按钮页面无法正常显示。

【讨论】：