CSS 3 - transition prefixes - which ones to use?

问题:

I have a question regarding the CSS vendor prefixes for transition.

This source states that "you need to use all the usual prefixes to make this work in all browsers (-o-, -webkit-, -moz-, -ms-)".

That page only shows the -webkit- and -moz- prefixes and claims that IE 10+, FF 16+ and Opera 12.1+ can read the prefix free version.

In the code of Twitter Bootstrap, there is always exists a -webkit-, -moz- and -o- prefixed version in addition to the un-prefixed version.

What prefixes should I use?

回答1:

http://caniuse.com/#search=transition says that you need -webkit- and plain property for modern browsers.

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

Edit May 2015: I highly recommend use Autoprefixer as 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.

Edit 2019: No need in prefixes and less and less need in Autoprefixer, future is nice :)

回答2:

Edit: You shouldn't need any prefixes anymore.

Just use transition.

---

As of now, all vendor prefixes should be used for CSS3 transitions. For example,

-webkit-transition: all 500ms;
   -moz-transition: all 500ms;
     -o-transition: all 500ms;
        transition: all 500ms;

回答3:

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 all properties 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 -ms prefix for many CSS3 properties.

I would say for today you should just add prefixes. But future will not be like this!

回答4:

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).

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.

回答5:

-webkit- only, along with unprefixed version, of course.

All other browsers either moved with prefix-free properties (like Firefox or Opera), or never used them (like IE)

I recommend checking CanIUse.com regularly for the most up-to-date information.

http://caniuse.com/#feat=css-transitions

回答6:

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 you the exact prefixes you need, 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.