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

-webkit- prefix on animations

I saw some CSS where the the

-webkit-
prefix was used both inside
@keyframes
and
@-0webkit-keyframes
.

I'm talking about https://github.com/daneden/animate.css/blob/master/animate.css

Is that required?

Answer

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.