-webkit- prefix on animations

Question

I saw some CSS where the the -webkit- prefix was used both inside @keyframes and @-0webkit-keyframes.

I'm talking about animate.css

Is that required?

Answer 1

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.