What is the right combination of prefixes for CSS transitions and transforms?

Question

What would be the right way to prefix this CSS in order to cover the widest range of browsers and versions?

Version 1:

-webkit-transition: -webkit-t         


        

Answer 1

As of right now, if you’re supporting the top-two newest versions of each browser, here are the prefixes you need:

-webkit-transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;

-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);

So to answer your question, yes, the prefix-transition should target the prefix-transform. Pretty sure that is always true for transforms (although not necessarily for other properties. Flexbox and Gradients can be complex prefix-wise, I suggest you use Autoprefixer to keep those rules straight).

Also, my favorite way to figure out this kind of question is to go to a new Pen in CodePen, turn on Autoprefixer in the CSS settings, paste my code in, and compile it. Autoprefixer automatically adds prefixes for the top-two of each browser. Kinda magical!