When to use prefixes in CSS

Question

Ok I suppose I have the following animation keyframe :

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    transform: none;
  }
}

How do I make sure this animation is compatible with most modern browsers ??
I mean how do I get to know , how many prefixes I have to apply before the keyframes ??
Where do I look for Which browsers support keyframes but with prefixes only ??
And which browsers support this property without prefixes .

I found a nice site : can i use

But now how do I extract from this site in the most efficient manner which properties are supported in browsers with prefixes and without prefixes ??

I scanned so and this question was't asked, even though its a really important question , I use Emmet in sublime text , which takes care of prefixes too, but those can get obsolete at times especially with browser support increases , so I would really like to find out myself and be in better control.

If there is any doubt about my question , please refer to the title of the question.

EDIT ::

Just to clarify a bit more , suppose i have a plain chart like this :

(the above chart is taken from caniuse.com).

now how do i pinpoint for which browsers i need the prefix and for which i don't .

by the way , the answers about using the JS plugin and also using grunt all sounds great , but thats a bit advanced for me .

so plain and simple . how do i decide which prefixes to add manually . ??

Thanks.

Alexander

Answer 1

The prefixes you need to add are pretty standard.

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
    -webkit-transform: translate3d(3000px, 0, 0);
    -o-transform: translate3d(3000px, 0, 0);
    -moz-transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
    -webkit-transform: translate3d(-25px, 0, 0);
    -o-transform: translate3d(-25px, 0, 0);
    -moz-transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
    -webkit-transform: translate3d(10px, 0, 0);
    -o-transform: translate3d(10px, 0, 0);
    -moz-transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
    -webkit-transform: translate3d(-5px, 0, 0);
    -o-transform: translate3d(-5px, 0, 0);
    -moz-transform: translate3d(-5px, 0, 0);
  }

  100% {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
  }
}

Why load entire library of js when you can code it yourself?!

Answer 2

Personally I use Grunt for development. It has a lot of cool feature (less compilation, js minification, ...), and there is also a tool available that does exactly what you need: Grunt Auto Prefixer. It uses the database from 'can I use' and adds prefixes if necessary, and even removes the ones that are obsolete. All you have to do is tell it which versions of which browsers you want to support.

If you set it up correctly all is done automatically when you save changes to your css file and your browser even reloads the css automatically without a page refresh.

It may seam a bit complicated at first, but Grunt isn't that hard and there are tons of information and good tools out there. It's really worth checking out!

Answer 3

Quick and simple use Prefix free: Break free from CSS vendor prefix hell!

you can get it on cdnjs too