css - How should you prefix transform properties in CSS3 animations?

Question

I have the following snippet of Sass that works like a charm, but I wonder if I need to prefix my transform properties, and, if so, how? (if not, why not?)

@mixin expand-o-band() {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2); }
}

@-webkit-keyframes expand-o-band { @include expand-o-band(); }
@-moz-keyframes expand-o-band { @include expand-o-band(); }
@-o-keyframes expand-o-band { @include expand-o-band(); }
@keyframes expand-o-band { @include expand-o-band(); }


.circle-thing {
    -webkit-animation: expand-o-band 1.5s infinite; /* Safari 4+ */
    -moz-animation:    expand-o-band 1.5s infinite; /* Fx 5+ */
    -o-animation:      expand-o-band 1.5s infinite; /* Opera 12+ */
    animation:         expand-o-band 1.5s infinite; /* IE 10+, Fx 29+ */
}

Please note I'm not asking about using something like autoprefixer, etc., to do this for me, but what I would need to add to my mix-in to make this compatible with the widest range of browsers?

Answer 1

This is one of those cases where vendor prefixes for standardized features become extremely problematic, because you need to account for all the different prefixed and/or unprefixed implementations of different features in different versions of different browsers.

What a mouthful. And then you have to combine various permutations of these. What a handful.

In short, you need to figure out which versions of each browser requires a prefix for each of the individual properties, and unless you don't mind the bloat, you will need to apply the prefixes differently for individual browsers. Fortunately, this part is made extremely easy by the fantastic and up-to-date resource, caniuse.com; here are the compatibility tables for 2D transforms and animations.

The good news is that browsers are generally very consistent in terms of reaching stable (i.e. unprefixed) implementations of both transforms and animations:

• IE9 implemented -ms-transform, and only began implementing animations in IE10 with stable unprefixed syntax by RTM as well as unprefixing transforms. IE is notably the only browser where prefixing transforms in animations is pointless, because on top of being the only browser to require prefixes for transforms, IE9 simply isn't going to recognize CSS animations anyway.

  That doesn't stop you from using -ms-transform elsewhere and having animations as a form of progressive enhancement, of course, but including it within animations is pointless. Also, you may have read about an @-ms-keyframes prefix, but that is only used in pre-release versions of IE10 which have since long expired and will no longer run anyway.

• Firefox shipped -moz-transform as early as version 3.5, with animations coming in much later at version 5, then removed prefixes from both features simultaneously in version 16.

• WebKit-based browsers (including Opera 15 and later) still require the -webkit- prefix for animations today, and transforms are only unprefixed in recent versions of Chrome. You will need the prefix for both features.

• Opera 12.00 was the only version to use @-o-keyframes. -o-transform was used up to that version as well. 12.10 dropped prefixes for both, and then it went straight on to regress into requiring both prefixes again by moving to WebKit in version 15 as mentioned above.

Unfortunately, since you have all these prefixes in your CSS animations and you're using the same mixin for all of them, you will need just as many prefixes for your CSS transforms for your prefixed animations to actually be of any use:

@mixin expand-o-band() {
    0%   {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
    }
}

You can greatly reduce the bloat if you use a mixin that takes a prefix argument, and pass the appropriate prefix to the mixin in each of your @keyframes rules, but that's probably outside the scope of this question (but it's mostly because I don't really know Sass).