浏览器特定的前缀，在转换时具有 CSS 过渡

根据 caniuse.com，对于同时支持 CSS 的浏览器transition和CSStransform，组合起来至少有三种不同的类型：

1. 那些需要-webkit-两者的前缀transition and transform（例如 Safari 6、Android 浏览器
2. 那些只需要-webkit-前缀于transform（例如 Chrome 3x）。
3. 那些不需要前缀的浏览器（例如 FF 和 IE10/11）。

我怎样才能安全地写我的transition样式以便在每种类型中正确解析它们？我看到两个选择：

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

or

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

现在，由于类型 2 和类型 3 浏览器，我需要有一个无前缀转换both -webkit-transform and transform。第一个选项的问题是我担心类型 2 和类型 3 浏览器将无法解析第二行，因为它们始终包含无法识别的属性。问题是，浏览器如何处理 a 中的无效属性transition--忽略整个transition样式还是只是跳过无效属性？

我认为可以通过将其分成两个属性来缓解这一问题，这样如果一个属性不可解析，它将被忽略。除了第二个选项有点冗长之外，我仍然想知道，在类型 2 浏览器的情况下，第三个选项是否transition将无法解析并“重置”transition回到零。

一般来说，它们的表现有什么想法吗？另外，当 Chrome 浏览器使用时，其中哪些是未来兼容的et al.切换自-webkit-transform到无前缀transform?

更新通知不幸的是，事实证明，在撰写本文时，Safari 并未遵循下面 W3 规范中概述的标准，并且在转换后同时包含 webkit 前缀属性和无前缀属性将导致它崩溃并且根本无法动画化。我仍在探索这个问题，寻找一个好的通用解决方案，但看起来在 Safari 解决这个问题之前，可能没有一个解决方案可以在任何地方以及所有未来的属性上工作，而无需使用 JavaScript 动态调整每个浏览器的 CSS 规则。

如果将无法识别或无效的属性添加到过渡属性列表中，则列表中的有效属性仍会添加（Safari 除外，请参阅上面的通知）。

根据 CSS Transitions w3 规范第 2.1 节：

如果列出的标识符之一不是可识别的属性名称或不是可动画属性，则实现仍必须使用列表中各自索引处的持续时间、延迟和计时函数来启动列表中可动画属性的转换，以用于 '过渡持续时间”、“过渡延迟”和“过渡计时函数”。

CSS 过渡的 W3 规范 http://www.w3.org/TR/css3-transitions/

如果您采用以下样式，尽管前面有一个无效且无法识别的属性，但 width 属性仍将具有动画效果。

transition: unrecognizedProperty 2s, width 2s;

如果您遵循一个转换规则和另一个转换规则（具有相同的前缀或缺少前缀），则第一条规则将被覆盖即使第二条规则仅具有右侧列出的无效属性，也不再适用。

如果您尝试以下样式，宽度将不会动画，因为第一条规则将被第二条规则覆盖，由于无法识别“unrecognizedProperty”，因此第二条规则实际上不执行任何操作。

transition: width 2s;
transition: unrecognizedProperty 2s;

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

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

第一条规则仅在 -webkit-transition 被识别时才适用，在这种情况下，由于转换是在转换后出现的，因此它肯定必须带有前缀，并且我们可以省略无前缀的转换属性（尽管我认为这不会损害别管它）。仅当识别到无前缀转换时才会应用第二条规则，在这种情况下，将应用浏览器识别的右侧属性，即使列表中的其他属性未被识别。

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

我相信确保您在所有有能力的浏览器上应用 2s 转换进行转换的浏览器前缀属性的完整列表如下，但请阅读下面的原理，因为它只是碰巧对于这个属性对来说如此简洁：

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

1. 请注意，没有 -ms-transition 这样的东西，但有一个 -ms-transform。话虽这么说，过渡直到 10 才添加到 IE，其中 -ms-transform 也因无前缀的转换而过时。因此，对于 IE，我们需要的唯一规则是“transition：transform”。

2. 我还要注意的是，任何时候我们有一个用于转换的浏览器前缀（

3. 由于 Firefox 在无前缀转换的同时发布了无前缀转换，因此我们不需要在无前缀“transition”的右侧添加前缀“-moz-transform”。

4. 除了 -o- 之外，Opera 在某些时候还使用 -webkit- 前缀进行转换，但是在版本 12.1 中开始使用无前缀转换之后，他们在版本 15 中开始使用 -webkit-transform，因此我们不需要包含 -webkit -o-转换后进行-transform。另外，由于 Opera 在 12.1 版本之后仅使用了 prefixless 或 -webkit-transform，因此我们不需要在无前缀转换之后包含 -o-transform。

5. 在这种情况下，我们不必将 -webkit-transform 包含在无前缀转换的右侧，因为仅识别 -webkit-tranform 的浏览器将回退到 -webkit-transition 并仍然应用此属性。

如果您不介意 CSS 的长度，那么以下应该是一个安全的通用解决方案，用于确保正确的浏览器过渡前缀和前缀右手属性。更新通知事实证明，这种方法在 Safari 上可能不安全，因为它们不遵循 W3 标准，即忽略过渡右侧无法识别的属性（如果有一个前缀和一个没有前缀）。

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