CSS 3 - transition prefixes - which ones to use?

css css-transitions transitions
Sven picture Sven · Jan 15, 2013 · Viewed 37.7k times · Source

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?

Answer

antejan picture antejan · Jan 15, 2013

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

Related questions

Disable/turn off inherited CSS3 transitions

So i have the following css transitions attached to the a element: a { -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ; -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in; -o-transition:color 0.1s ease-in, background-color 0.1s ease-in; transition:color 0.1s ease-in, background-color 0.1s …

Read More
Different CSS transition-delays for hover and mouseout?

Is it possible to use CSS3 transitions with a different delay switching between "states"? For example, I'm trying to make an element immediately higher upon hover then on 'mouseout' to wait a second before sliding back to the element's initial …

Read More
CSS Transition Not Firing

I'm creating a DOM element (a div), adding it to the DOM, then changing its width all in one quick hit in javascript. This in theory should trigger a CSS3 transition, but the result is straight from A to B, …

Read More