Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 578
Sven Avatar asked Jan 15 '13 00:01

Sven


3 Answers

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

like image 166
antejan Avatar answered Oct 20 '22 03:10

antejan


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;
like image 44
Mooseman Avatar answered Oct 20 '22 03:10

Mooseman


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!

like image 41
Mohsen Avatar answered Oct 20 '22 05:10

Mohsen