CSS 3 - 过渡前缀 - 使用哪些？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14329084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS 3 - transition prefixes - which ones to use?
提问by Sven
I have a question regarding the CSS vendor prefixes for transition.
我有一个关于过渡的 CSS 供应商前缀的问题。
This sourcestates that "you need to use all the usual prefixes to make this work in all browsers (-o-, -webkit-, -moz-, -ms-)".
该消息来源指出“您需要使用所有常用前缀才能在所有浏览器中运行（-o-、-webkit-、-moz-、-ms-）”。
That pageonly shows the -webkit-and -moz-prefixes and claims that IE 10+, FF 16+ and Opera 12.1+ can read the prefix free version.
该页面仅显示-webkit-和-moz-前缀，并声称 IE 10+、FF 16+ 和 Opera 12.1+ 可以读取前缀免费版本。
In the code of Twitter Bootstrap, there is always exists a -webkit-, -moz-and -o-prefixed version in addition to the un-prefixed version.
在 Twitter Bootstrap 的代码中，除了不带前缀的版本之外-webkit-，总是存在一个,-moz-和-o-带前缀的版本。
What prefixes should I use?
我应该使用什么前缀？
回答by antejan
http://caniuse.com/#search=transitionsays that you need -webkit- and plain property for modern browsers.
http://caniuse.com/#search=transition说你需要 -webkit- 和现代浏览器的普通属性。
-webkit-transition: all .5s ease;
transition: all .5s ease;
But it will be no problem if you add all of them, just be sure that property without prefix is the last one.
但是如果你把它们都加起来就没有问题，只要确保没有前缀的属性是最后一个。
Edit:as said in comment below, if you click on "All versions" you can see when each browser dropped prefix. For now it is better to use -moz- and -o- also.
编辑：如下面的评论中所述，如果您单击“所有版本”，您可以看到每个浏览器何时删除前缀。现在最好也使用 -moz- 和 -o- 。
Edit May 2015:I highly recommend use Autoprefixeras step on your build process (like Gulp/Grunt task) or as plugin to your code editor. It provides automatic prefixing on caniuse.com browser support stats.
2015 年 5 月编辑：我强烈建议使用Autoprefixer作为构建过程的步骤（如 Gulp/Grunt 任务）或作为代码编辑器的插件。它在 caniuse.com 浏览器支持统计数据上提供自动前缀。
Edit 2019:No need in prefixes and less and less need in Autoprefixer, future is nice :)
编辑 2019：不需要前缀，而 Autoprefixer 的需要越来越少，未来很好:)
回答by Mooseman
Edit: You shouldn't need any prefixes anymore.
编辑：您不再需要任何前缀。
Just use transition.
只需使用transition.
As of now, all vendor prefixes should be used for CSS3 transitions. For example,
截至目前，所有供应商前缀都应用于 CSS3 转换。例如，
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
回答by Mohsen
It depends on which CSS property you want to use. Mozilla is doing a good job at getting rid of prefixes for many properties. But you can not tell allproperties are now prefix free. I hear news from Chrome team that they want to make gradients prefix-free. I don't know about Opera but Internet Explorer 10 requires -msprefix for many CSS3 properties.
这取决于您要使用的 CSS 属性。Mozilla 在去除许多属性的前缀方面做得很好。但是你不能告诉现在所有的属性都是前缀免费的。我听到 Chrome 团队的消息，他们想让渐变无前缀。我不了解 Opera，但 Internet Explorer 10 需要-ms许多 CSS3 属性的前缀。
I would say for today you should just add prefixes. But future will not be like this!
我想说今天你应该只添加前缀。但未来不会是这样！
回答by Jules
Do yourself a favor and download Prefix Free. It's a minuscule JavaScript which lets you user pretty much any prefix-requiring property, without a prefix (including transitions, animations, and media queries).
帮自己一个忙，下载Prefix Free。这是一个很小的 JavaScript，它允许您使用几乎任何需要前缀的属性，而无需前缀（包括过渡、动画和媒体查询）。
EDIT: The only exception to all of this is media queries for Opera, where the pixel ratio (and nothing else) has to be expressed as a fraction rather than decimal.
编辑：所有这一切的唯一例外是 Opera 的媒体查询，其中像素比（和其他任何东西）必须表示为分数而不是小数。
回答by Evgeny
-webkit- only, along with unprefixed version, of course.
-webkit-，当然还有无前缀的版本。
All other browsers either moved with prefix-free properties (like Firefox or Opera), or never used them (like IE)
所有其他浏览器要么使用无前缀属性（如 Firefox 或 Opera），要么从未使用它们（如 IE）
I recommend checking CanIUse.com regularly for the most up-to-date information.
我建议您定期查看 CanIUse.com 以获取最新信息。
回答by Christian
I'll go against the grain here and suggest a different approach: if you've got a website set up with analytics, check the browser stats and versions and see what your users are actually using.
我将在这里反对并建议一种不同的方法：如果您的网站设置了分析功能，请检查浏览器统计信息和版本，并查看您的用户实际使用的内容。
Sure, you can drop the majority of prefixes, but if your users are on outdated browsers (for whatever reason), they won't get the features.
当然，您可以删除大部分前缀，但是如果您的用户使用过时的浏览器（无论出于何种原因），他们将无法获得这些功能。
No arbitrary website can tell youthe exact prefixes youneed, only you can figure out that information from your own data.
没有任意网站可以告诉你确切的前缀，你所需要的，只有你可以计算出从你自己的数据信息。
If you don't have the data, add all the prefixes to support as many people as possible. Then check the data in a few months and refactor if you need to.
如果您没有数据，请添加所有前缀以支持尽可能多的人。然后在几个月内检查数据并在需要时进行重构。
