18

我尝试transition在 Firefox 15 上使用，但它无法在其他版本的 Firefox 和其他浏览器（如 Chrome 和 Safari）上运行。

当我使用 Firefox 的检查器查看属性transition时，会出现“无效属性值”的错误。MDN和caniuse表示它在 Firefox 4 及更高版本上受支持！

#mydiv {
    transition: width 1s; /* Did I do this wrong? */
    background: #f00;
    width: 100px; height: 100px;
}
#mydiv:hover { width: 200px }

为什么有时属性在某些浏览器中可以正常工作transition而animation在其他浏览器中无效？

免责声明：这是通过添加供应商前缀可以完全解决的所有问题的规范副本。堆栈溢出问题不应该如此广泛，除非在元和之后创建的规范答案上进行讨论，就像这样。

4

1 回答 1

41

transition尽管情况并非总是如此，但属性喜欢或animation在某些浏览器上运行而不在其他浏览器上运行的最常见原因之一是供应商前缀。

什么是供应商前缀？

在 Firefox 第 4 版推出时，CSS 转换模块规范是一个工作草案。在规范最终确定之前（实际上，这是当它达到候选推荐时），浏览器供应商将供应商前缀添加到属性、值和 @-rules 以防止在规范更改时出现兼容性问题。

供应商前缀正是它们的名称所描述的 - 属性或值的特定于供应商（供应商意味着开发浏览器的公司）的前缀。它们通常以针对每个浏览器的特定方式实现，因为属性或值仍处于候选推荐阶段之前的众多实验阶段之一，在该阶段它们被视为实现就绪。

最常见的是-moz-（Mozilla Firefox）、-webkit-（Chrome、Safari 等）和-ms-（Microsoft Internet Explorer），但还有更多.

我什么时候需要使用它们？

这完全取决于您希望服务的浏览器、您使用的属性和值以及您开发网站的时间点。有些网站试图保留当前列表，但它们并不总是准确或保持最新。

以下是一些最常用的前缀属性和值。如果您的项目不支持属性右侧注释中提到的浏览器，则无需将其包含在您的 CSS 中。

过渡

无前缀属性有时具有前缀等效项，例如-webkit-transition.

为了获得完整的浏览器支持，以下是必要的：

.foo {
    -webkit-transition: <transition shorthand value>; /* Safari 3.1-6, Chrome 1-25, Old Android browser, Old Mobile Safari, Blackberry browser */
    -moz-transition: <transition shorthand value>;    /* Firefox 4-15 */
    -o-transition: <transition shorthand value>;      /* Old opera */
    transition: <transition shorthand value>;         /* Modern browsers */
}

请注意，-ms-前缀存在transition，但它仅由 IE10 的预发布版本实现，不再起作用，因此永远不需要它。它在 IE10 RTM 和更新版本中实现无前缀。

变换

.foo {
    -webkit-transform: <transform-list>; /* Chrome 21-35, Safari, iOS Safari, Opera 22, many mobile browsers */
    -ms-transform: <transform-list>;     /* IE9 */
    transform: <transform-list>;
}

动画

动画需要前缀属性和相应的关键帧，如下所示：

.foo {
  -webkit-animation: bar; /* Safari 4+ */
  -moz-animation: bar;    /* Fx 5+ */
  -o-animation: bar;      /* Opera 12+ */
  animation: bar;         /* IE 10+, Fx 16+ */
}

@-webkit-keyframes bar { /* Keyframes syntax */ }
@-moz-keyframes bar { /* Keyframes syntax */ }
@-o-keyframes bar { /* Keyframes syntax */ }
@keyframes bar { /* Keyframes syntax */ }

弹性盒

值也可以加上前缀，例如flexbox。注意：为了最大程度地兼容浏览器，除了以下内容之外，某些浏览器中还需要为特定于 flexbox 的属性（如ordinal-group、flex-flow、flex-direction、order、等）添加前缀：box-orient

.foo {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-box-flex: <flex shorthand value>;
    -moz-box-flex: <flex shorthand value>;
    -webkit-flex: <flex shorthand value>;
    -ms-flex: <flex shorthand value>;
    flex: <flex shorthand value>;
}

计算

.foo {
    width: -webkit-calc(<mathematical expression>); /* Chrome 21, Safari 6, Blackberry browser */
    width: -moz-calc(<mathematical expression>);    /* Firefox <16 */
    width: calc(<mathematical expression>);         /* Modern browsers */
}

渐变

有关更多信息，请参阅CSS -Tricks 上的CSS 渐变。

.foo {
    background-color: <color>; /* Fallback (could use .jpg/.png alternatively) */
    background-image: url(bar.svg); /* SVG fallback for IE 9 (could be data URI, or could use filter) */  
    background-image: -webkit-gradient(linear, left top, right top, from(<color-stop>), to(<color-stop>)); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */  
    background-image: -webkit-linear-gradient(left, <color-stop>, <color-stop>); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */  
    background-image: -moz-linear-gradient(left, <color-stop>, <color-stop>); /* Firefox 3.6 - 15 */
    background-image: -o-linear-gradient(left, <color-stop>, <color-stop>); /* Opera 11.1 - 12 */
    background-image: linear-gradient(to right, <color-stop>, <color-stop>); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
}

请注意，left和to right代表相同的方向，从左到右，因此left和to left指向相反的方向。有关一些背景信息，请参阅此答案。

边界半径（大多数情况下不需要）

.foo {
    -webkit-border-radius: <length | percentage>; /* or iOS 3.2 */
    -moz-border-radius: <length | percentage>;    /* Firefox 3.6 and lower */
    border-radius: <length | percentage>;
}

盒子阴影（大多数情况下不需要）

.foo {
    -webkit-box-shadow: <box-shadow shorthand value>; /* iOS 4.3 and Safari 5.0 */
    -moz-box-shadow: <box-shadow shorthand value>;    /* Firefox 3.6 and lower */
    box-shadow: <box-shadow shorthand value>;
}

它们如何用 JavaScript 实现？

要访问 JavaScript 中的前缀属性和事件，请使用与 CSS 前缀等效的camelCase 。对于像这样的事件侦听器也是如此foo.addEventListener('webkitAnimationIteration', bar )（foo作为一个 DOM 对象，像document.getElementsById('foo')）。

foo.style.webkitAnimation = '<animation shorthand value>';
foo.style.mozAnimation = '<animation shorthand value>';
foo.style.oAnimation = '<animation shorthand value>';

前缀工具

在线前缀可能会有所帮助，但并不总是可靠的。始终确保在您希望支持的设备上测试您的项目，以确保每个设备都包含适当的前缀。

CSS预处理器功能：

JavaScript 前缀函数：

另请参阅： 为什么浏览器会为 CSS 属性创建供应商前缀？

于 2014-08-04T01:00:53.673 回答