How do i add prefixes (transform) within prefixes (keyframes)?

Question

If i'm using @keyframes to perform a transform animation, how would I lay out my prefixes?

If i have the following:

@keyframes animation {
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

Do i then need to add all my transform prefixes to each keyframe declaration? EG:

@keyframes animation {
    0%   {
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% { 
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

@-webkit-keyframes animation {
    0%   {
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% { 
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

Does this work? If this the best way to do this or is there a shorthand / quicker way? I'd imagine this way will look bulky and horrible very quickly with even mildly complex animations.

Many developers use Javascript or Pre-processor plug-ins to do this. Check out [**PrefixFree**](http://leaverou.github.io/prefixfree/) or [**Autoprefixer**](https://github.com/postcss/autoprefixer)...there are others. — Paulie_D, Dec 23 '15 at 11:08

score 2 · Accepted Answer · edited May 23 '17 at 11:52

In general, prefixes are a mess especially when it comes to CSS animations and transforms. I have a comprehensive guide to managing prefixes for these two features which you can find here.

What you have certainly works, but it's unnecessary:

Browsers other than IE aren't going to recognize the -ms-transform declaration anyway, and the versions of IE that support CSS animations out of the box also support unprefixed transform.

This means the -ms-transform simply isn't needed, at all. You should remove all instances of it. You only really need it outside of CSS animations where you want the transforms to work statically in IE9. See the link above for details.
Animations and transforms were unprefixed in WebKit only very recently. However, versions of WebKit that support @keyframes unprefixed also support transforms unprefixed. You can remove the -webkit-transform declarations from your @keyframes rule.
I wouldn't touch the unprefixed transform declarations in both rules. Transforms were unprefixed slightly earlier than animations, so some WebKit versions that require @-webkit-keyframes do support unprefixed transforms.

Also, the unprefixed rule should come last. This applies both to properties (like transform) and to at-rules (like @keyframes). Here's your CSS with the above optimizations:

@-webkit-keyframes animation {
    0%   {
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% { 
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

@keyframes animation {
    0%   {
        transform:rotate(0deg);
    }
    100% { 
        transform:rotate(360deg);
    }
}

Thanks very much; this has answered my question and cleared up any additional queries I might have had! — Mr DC, Dec 23 '15 at 13:22

How do i add prefixes (transform) within prefixes (keyframes)?

1 Answers1