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

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

在我看来，当在转换属性上使用供应商前缀时，我还应该以要转换的供应商前缀属性为目标

---

我真的找不到任何结束语。

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

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

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

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

另外，我最喜欢的解决这类问题的方法是在中使用新笔，在CSS设置中打开Autoprefixer，粘贴我的代码，然后编译它。Autoprefixer会自动为每个浏览器的前两个添加前缀。有点不可思议

正如我在一篇文章中提到的

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

多丰盛的食物啊。然后你必须把这些元素的各种排列组合起来。真是一把

简言之，您需要确定每个浏览器的哪些版本需要为每个单独的属性指定前缀，除非您不介意这样的膨胀，否则您需要为各个浏览器应用不同的前缀

链接的问题是指动画，而不是导致显著不同符号的过渡，但这两个功能都经历了类似的过程。也就是说，以下是来自caniuse.com的和的兼容性表

换句话说，仅仅因为一个功能在一个浏览器的一个版本中有前缀，并不意味着另一个功能也必须在同一浏览器的同一版本中有前缀。例如，Chrome Unfixed转换之前至少转换了十个主要版本（26），而Safari仍然需要前缀来进行转换。因此，您肯定要有以下声明：

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

如果您确实需要，则必须使用以下内容覆盖更旧的版本：

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

其他浏览器奇迹般地能够同时修复过渡和变换（以及动画），这使事情变得更容易：

• -ms transition

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

  -ms transform

  带前缀仅由IE9使用；IE10及更高版本附带未修复的转换。但出于优雅降级的目的，您可能希望保持

  -ms变换：rotateX（-30度）声明-请记住它不能转换，因为IE9不支持CSS转换或动画
  
  

• -moz-transition

  和

  -moz-transform

  被Firefox使用了15次（含15次），然后在16次未修复

• Opera在12.00之前（含12.00之前）使用了

  -o-transition

  和

  -o-transform

  ，然后在12.10中取消固定，然后在以后的版本中，在其移动到闪烁时重新加前缀为

  -webkit-

总而言之，根据caniuse.com提供的信息（我相信这些信息在大多数情况下都是最新和准确的），以下是您需要的所有前缀：

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

最后一点：注意上面示例中的两个未固定的

转换

声明？现在，您可能认为将它们合并成一个单独的声明是很容易的，如下所示：

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

---

但是，不幸的是，虽然其他浏览器可以很好地应用它。

最终，仅仅为了支持较旧版本的自动更新浏览器而降低网页加载速度是愚蠢的。对于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);

---

瞧，它的IE兼容性与所有这些重前缀相同，同时支持最新版本的自动更新浏览器。如果你真的觉得有必要为那些不断推迟浏览器更新的0.001%的人提供支持，然后在屏幕底部放一条小消息，告诉用户如果页面显示不正确，请单击浏览器中的“更新”按钮。

这只是一种意见based@Mr.Alien：那么你是说这没关系？@Alien先生，我不同意。这似乎是一个可以客观回答的问题，“如果我为属性使用供应商前缀，我是否也需要为属性使用供应商前缀？”因此您尝试了它，结果是。。。？？？我怀疑需要带前缀版本的

transform

（有吗？）的浏览器会接受不带前缀的版本作为

transition

属性，但我知道什么，试试看！看看什么是AutoRefixer（）does@torazaburo可能不是，只是取决于您的浏览器支持。在我工作的网站上，仍然有很多人使用旧的Android浏览器，这些浏览器确实需要webkit，而且把它们放在那里并没有什么坏处。但这也是我建议Autoprefixer自动删除前缀的另一个原因

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

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