虽然情况并非总是如此，但像 transition 或 animation 这样的属性在某些浏览器上有效而在其他浏览器上无效的最常见原因之一是 供应商前缀 。
什么是供应商前缀？
在 Firefox 第 4 版推出时，CSS 转换模块规范是一个工作草案。在规范最终确定之前（实际上，这是当它达到候选推荐时），浏览器供应商将供应商前缀添加到属性、值和 @-rules 以防止在规范更改时出现兼容性问题。
供应商前缀正是其名称所描述的 - 属性或值的特定于供应商（供应商意味着开发浏览器的公司）的前缀。它们通常以针对每个浏览器的特定方式实现，因为属性或值仍处于候选推荐阶段之前的许多实验阶段之一，即the stage where they are considered implementation-ready。
最常见的是-moz-（Mozilla Firefox）、-webkit-（Chrome、Safari 等）和-ms-（Microsoft Internet Explorer），但there are more。
我什么时候需要使用它们？
这完全取决于您希望服务的浏览器、您使用的属性和值以及您开发网站的时间点。有try to keep a current list 的网站，但它们并不总是准确的或保持最新的。
以下是一些最常用的前缀属性和值。如果您的项目不支持属性右侧注释中提到的浏览器，则无需将其包含在您的 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。 注意：为了获得最大的浏览器兼容性，在某些浏览器中需要添加前缀，例如 ordinal-group、flex-flow、flex-direction、order、box-orient 等 flexbox 特定属性除了以下：
.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 Gradients。
.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 指向相反的方向。有关背景信息，请参阅this answer。
边框半径（大多数情况下不需要）
.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 前缀函数：
另请参阅： Why do browsers create vendor prefixes for CSS properties?