Anna K. Anna K. - 9 months ago 29
CSS Question

-webkit- prefix on animations

I saw some CSS where the the

prefix was used both inside

I'm talking about

Is that required?


The -webkit- prefix is required with both @keyframes and animation* in these browsers:

Chrome  <= 42
Firefox <= 15
Safari  <= 8
Opera   <= 29
Safari&Chrome (iOS) <= 8.4
Android browser <= 4.4.4

Lets take for example this code:

.animated {
    animation-duration: 1s;

This code will work in IE 11 and Firefox 37, but will not work in Chrome 40 and not in Safari 7.

If you will change the code to:

.animated {
    -webkit-animation-duration: 1s;

This code will work in latest versions of chrome/firefox/safari, but will be ignored in IE 10.

This is why it's advised to have both options:

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;

And the same works for @keyframes and @-webkit-keyframes.

If you care only about new up-to-date versions, you can avoid the -webkit- prefix. Otherwise I advise to use both versions.