特定于浏览器的前缀，在转换时带有CSS转换

根据caniuse.com，对于同时支持CSS

transition

和CSS

transform

的浏览器，组合起来至少有三种不同类型：

那些在

转换

和

转换

上都需要

-webkit-

前缀的浏览器（例如Safari 6、Android浏览器<4.4）

那些只需要

-webkit-

转换前缀的（例如Chrome 3x）

都不需要前缀的（例如FF和IE10/11）

如何安全地编写

转换

样式，以便在每种类型中正确解析它们？我看到两种选择：

-webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms, transform 300ms;

或

现在，由于类型2和类型3浏览器，我需要为

-webkit transform

和

transform

都提供一个无前缀的转换。第一个选项的问题是，我担心Type2和Type3浏览器将无法解析第二行，因为它们总是包含无法识别的属性。问题是，浏览器如何处理

转换

中的无效属性——忽略整个

转换

样式，或者跳过无效属性

我认为这可以通过将它分成两个属性来缓解，这样，如果其中一个属性不可解析，它将被忽略。除了第二个选项有点冗长之外，我仍然想知道，在类型2浏览器的情况下，第三个

转换

是否将不可解析，并将

转换

重置为空

---

一般来说，你知道它们的性能如何吗？另外，当Chrome等人从

-webkit transform

切换到前缀less

transform

时，哪一个是未来兼容的？

我相信在找到识别的转换前缀之前，将跳过未识别的转换前缀

我目前正在使用这个网站，它为我们工作

CSS

---

更新通知不幸的是，在发布本文时，Safari并未遵循以下W3规范中概述的明确标准，并且在转换后包含webkit前缀属性和无前缀属性将导致其中断，根本无法设置动画。我仍在探索这个问题，寻找一个好的通用解决方案，但在Safari修复这个问题之前，似乎没有一个解决方案可以在任何地方都有效，并且可以用于所有未来的属性，而不使用JavaScript动态调整每个浏览器的CSS规则

---

如果将无法识别或无效的属性添加到转换属性列表中，列表中的有效属性仍将被添加（Safari除外，请参见上面的注意事项）

根据w3 CSS转换规范第2.1节：

如果列出的标识符之一不是可识别的属性名称或不是可设置动画的属性，则实现仍必须在“转换持续时间”、“转换延迟”列表中的相应索引处使用持续时间、延迟和计时函数在列表中的可设置动画的属性上开始转换，和“过渡时间函数”

如果采用以下样式，“宽度”属性仍将设置动画，尽管前面有无效且无法识别的属性

transition: garbageProperty 2s, width 2s;

---

如果使用另一个转换规则（具有相同前缀或缺少前缀）遵循转换规则，第一个规则将被覆盖，并且不再应用，即使第二个规则仅在右侧列出了无效属性

如果尝试以下样式，宽度将不会设置动画，因为第一条规则将被第二条规则覆盖，而第二条规则实际上不起任何作用，因为无法识别“garbageProperty”

transition: width 2s;
transition: garbageProperty 2s;

---

基于此，我相信你的第一种方法是正确的

-webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms, transform 300ms;

第一条规则只有在-webkit转换被识别的情况下才会应用，在这种情况下，因为转换在转换之后出现，所以它肯定必须加前缀，并且我们可以省略unfixed transform属性（尽管我认为离开它不会有什么坏处）。第二条规则仅在识别非固定转换时应用，在这种情况下，浏览器识别的右侧属性中的任何一个都将被应用，即使列表中的其他属性未被识别

transition: width 2s;
transition: garbageProperty 2s;

您的第二种方法是有缺陷的，因为第二条规则将始终被第三条规则覆盖，无论右侧的任何属性是否被识别

transition: width 2s;
transition: garbageProperty 2s;

我相信浏览器前缀属性的完整列表可以保证您在所有有能力的浏览器上应用2s转换，但是请阅读下面的rational，因为它只是碰巧对这个属性对如此整洁：

-webkit-transition: -webkit-transform 2s;
   -moz-transition:    -moz-transform 2s;
     -o-transition:      -o-transform 2s;
        transition:         transform 2s;

1） 注意没有-ms转换，但是有-ms转换。也就是说，直到10年前，转换才被添加到IE中，其中-ms转换也因未固定的转换而过时。因此，对于IE，我们需要的唯一规则是“转换：转换”

2） 另外，我要指出的是，任何时候我们有一个用于转换的浏览器前缀（ 3） 由于Firefox在发布Unfixed transform的同时发布了Unfixed transform，因此我们不需要在Unfixed“transform”的右侧添加前缀“-moz transform”

4） Opera在某种程度上除了使用-o-，还使用了-webkit-prefix进行转换，但是在版本12.1中开始使用无前缀转换之后，他们在版本15中开始使用-webkit转换，因此我们不需要在-o-转换之后包含-webkit转换。也因为歌剧只有我们

-webkit-transition: -webkit-property,
                            property;
   -moz-transition:    -moz-property,
                            property;
    -ms-transition:     -ms-property,
                            property;
     -o-transition:      -o-property,
                    -webkit-property,
                            property;
        transition: -webkit-property,
                       -moz-property,
                        -ms-property,
                         -o-property,
                            property;