How Should You Prefix Transform Properties in CSS3 Animations

How should you prefix transform properties in CSS3 animations?

Given that:

Im not asking about using something like autoprefixer

It depends on which browsers and which versions you want to support:

-ms- can be used for IE9 (below IE9 is not supported at all) however, animations are only supported in IE10+, as such, if you are animating a transform including the ms prefix is redundant

-webkit- can be used for Chrome 35, 31, Safari and android browsers

@mixin expand-o-band() {
    0%   { 
       opacity: 1; 
       -ms-transform: scale(1); /* <--- not necessary */
       -webkit-transform: scale(1); 
       transform: scale(1); 
    }
    100% { 
       opacity: 0; 
       -ms-transform: scale(2);  /* <--- not necessary */
       -webkit-transform: scale(2); 
       transform: scale(2); 
    }
}

Generally solutions like autoprefixer are highly recommended because they allow you to write clean CSS then to clearly define which browsers and (legacy) versions thereof you wish to support. The advantage of this is that your source is then less likely to include items which may at a later date become irrelevant to you (and your end user base), and the worry of correctly including the right implementations is abstracted away.

What is the right combination of prefixes for CSS transitions and transforms?

As I mentioned in a very similar question...

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.

The linked question refers to animations rather than transitions which results in significantly different notations, but both features went through similar unprefixing processes AFAIK. That being said, here are the compatibility tables from caniuse.com for 2D transforms and transitions.

In other words, just because one feature is prefixed in one version of one browser doesn't mean the other feature is necessarily also prefixed in the same version of the same browser. For example, Chrome unprefixed transitions at least ten major versions (26) before it unprefixed transforms (36), and Safari still requires prefixes for transforms. As a result, you're definitely going to have to have this declaration:

transition: -webkit-transform .3s ease-in-out;

And if you absolutely need to, you will have to cover even older versions with the following:

-webkit-transition: -webkit-transform .3s ease-in-out;

Other browsers, miraculously, were able to unprefix both transitions and transforms (as well as animations) simultaneously, which makes things much easier:

-ms-transition is only used by pre-release versions of IE10, which have long since expired. No other version of IE uses prefixed transitions, so you should remove that particular transition prefix.
-ms-transform with the prefix is only used by IE9; IE10 and later ship with unprefixed transforms. But for the purposes of graceful degradation you may want to keep your -ms-transform: rotateX(-30deg); declaration — just keep in mind that it cannot be transitioned as IE9 does not support CSS transitions or animations.
-moz-transition and -moz-transform were used by Firefox up to and including 15, then unprefixed in 16.
-o-transition and -o-transform were used by Opera up to and including 12.00, then unprefixed in 12.10, then re-prefixed as -webkit- in later versions in its move to Blink.

In summary, here are all the prefixes that you need, based on the information given by caniuse.com (which I trust to be current and accurate for the most part):

-webkit-transition: -webkit-transform .3s ease-in-out; /* Chrome < 26, Safari < 7 */
   -moz-transition:    -moz-transform .3s ease-in-out; /* Firefox < 16 */
     -o-transition:      -o-transform .3s ease-in-out; /* Opera < 12.10 */
        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg); /* Only for graceful degradation in IE9, cannot be transitioned */
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

The bare minimum that you will need to support the latest version of each browser as of this writing is:

        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

As mentioned in the comments, you can use a tool like Autoprefixer to automate this for you based on the level of browser support you require. However, for those who prefer to write their CSS manually, or for those who are just wondering exactly which prefixes are needed by which browsers, this is it.

On a final note: notice the two unprefixed transition declarations in the above examples? Now, you'd think it'd be easy enough to just combine them into a single declaration like this:

transition: -webkit-transform .3s ease-in-out, transform .3s ease-in-out;

But, unfortunately, Chrome will erroneously completely ignore this declaration, while other browsers will apply it just fine.

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

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);
    }
}

Javascript code for CSS3 animation and transform property

When I understand your question correctly you want to do the transform in JS, and not CSS (in that case I'd recommend SASS with the compass framework)

You could do it like this, so the right prefix is used:

var sty = ele.style, transform, transforms = ["webkitTransform", "MozTransform", "msTransform", "OTransform", "transform"];
for (var i in transforms) {
    if (transforms[i] in sty) {
        transform = transforms[i];
        break;
    }
}

and later on:

ele.style[transform] = "whatever transform you like to do";

So you do not have to set each of them, and of course you can reuse the "transform" variable for other elements, so the check only has to be done once.

Browser-specific prefixes with a CSS transition on transform

UPDATE NOTICE Unfortunately it turns out Safari at the time of this post does not follow the standard outlined in the W3 Specification below, and including both a webkit prefixed property and a prefix-less property after transition will cause it to break and not be animated at all. I am still exploring this issue for a good general solution but it looks like until Safari fixes this, there may not be one that works everywhere, and for all future properties, without adjusting your CSS rules per browser dynamically with JavaScript.

If you add an unrecognized or invalid property to a list of transition properties, the valid properties in the list will still be added (except on Safari, see notice above).

According to section 2.1 of the w3 Specification for CSS Transitions:

If one of the identifiers listed is not a recognized property name or is not an animatable property, the implementation must still start transitions on the animatable properties in the list using the duration, delay, and timing function at their respective indices in the lists for ‘transition-duration’, ‘transition-delay’, and ‘transition-timing-function’.

W3 Specification for CSS Transitions

If you take the following style, the width property will still be animated despite being preceded by an invalid and unrecognized property.

transition: unrecognizedProperty 2s, width 2s;

If you follow a transition rule with another transition rule (with the same prefixing or lack thereof), the first rule will be overwritten and no longer applied even if the second rule only has invalid properties listed on the right hand side.

If you try the following style the width will not be animated because the first rule will be overwritten by the second rule, which effectively does nothing since "unrecognizedProperty" is not recognized.

transition: width 2s;
transition: unrecognizedProperty 2s;

Based on this I believe your first approach is correct.

-webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms, transform 300ms;

The first rule will only be applied if -webkit-transition is recognized, in which case since transform came out after transition it will definitely have to be prefixed and we can omit the unprefixed transform property (although I don't think it would hurt to leave it). The second rule will only be applied if unprefixed transition is recognized, in which case whichever of the right-hand side properties that are recognized by the browser will be applied, even if other properties in the list are not recognized.

Your second approach is flawed since the second rule will always be overwritten by the third rule regardless of if any properties on the right hand side are or are not recognized.

I believe the complete list of browser prefixed properties to guarantee that you apply transition of 2s to transform on all browsers that are capable is the following, but please read the rational below because it only happens to be this neat for this property pair by chance:

-webkit-transition: -webkit-transform 2s;
   -moz-transition:    -moz-transform 2s;
     -o-transition:      -o-transform 2s;
        transition:         transform 2s;

Note there is no such thing as -ms-transition, but there is a -ms-transform. That being said transition was not added to IE until 10 where -ms-transform was also outdated by unprefixed transform. Hence for IE the only rule we need is "transition: transform".
I will additionally note that any time we have a browser prefix for transition (< Chrome 26, < Firefox 16, < Safari 6.1, < Opera 12.1), then transform was definitely still prefixed as well (< Chrome 36, < Firefox 16, all Safari, < Opera 23), meaning we can leave off the unprefixed version of transform following a prefixed rule.
Since Firefox released unprefixed transition at the same time as their unprefixed transform, we do not need the prefixed "-moz-transform" on the right-hand side of the unprefixed "transition".
Opera at some point used -webkit- prefix for transform in addition to -o-, however they started using -webkit-transform in version 15, after starting to use prefixless transition in version 12.1, so we do not need to include the -webkit-transform after -o-transition. Also since Opera only used prefixless or -webkit-transform after version 12.1, we do not need to include -o-transform after the prefixless transition.
In this case we do not have to include -webkit-transform to the right of prefix-less transition because browsers that only recognize -webkit-tranform will fall back to -webkit-transition and still apply this property.

If you don't mind the length of your CSS though, the following should be a safe generalized solution for ensuring proper browser prefixing of transition and a prefixed right hand property. UPDATE NOTICE As it turns out this approach may not be safe on Safari since they do not follow the W3 standard on ignoring unrecognized properties to the right of transition if there is one that is prefixed and one that is not.

-webkit-transition: -webkit-property,
                            property;
   -moz-transition:    -moz-property,
                            property;
    -ms-transition:     -ms-property,
                            property;
     -o-transition:      -o-property,
                    -webkit-property,
                            property;
        transition: -webkit-property,
                       -moz-property,
                        -ms-property,
                         -o-property,
                            property;

Are browser prefixes required for all version of animation keyframes

From my answer to this similar question:

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.

(Transforms were unprefixed in Chrome 36; animations were not unprefixed until Chrome 43. Both features were unprefixed simultaneously in Safari 9 so you never need to worry about prefixed/unprefixed overlap in Safari.)

In a nutshell, while your two samples don't provide exactly the same functionality, there is no point including any unprefixed properties in @-webkit-keyframes as most WebKit browsers that depend on the prefixed at-rule are never going to need the unprefixed properties. Specifically, from our chat discussion:

You can lose the unprefixed [animation-timing-function] declaration. @keyframes is in the same family as the animation-* properties and no browser in existence supports one unprefixed without the other
As for transforms, only a very fringe few browsers simultaneously support unprefixed transforms and require prefixes on animations. These browsers do still support prefixed transforms, so similarly you can lose unprefixed transforms in @-webkit-keyframes
Note the difference between "support" and "require"

So, code sample two is all you need. It's over 40% smaller than code sample one, with no loss of functionality. 40% is a big deal. The only change I'd make is move the @-webkit-keyframes rule up:

@-webkit-keyframes coolEffect {
  -webkit-transform: some value;
  -webkit-animation-timing-function: some value;
}
@keyframes coolEffect {
  transform: some value;
  animation-timing-function: some value;
}

Readers may also be interested in my comments on Autoprefixer:

I assume Autoprefixer sees that Chrome 36-42 supports unprefixed transforms but requires prefixed animations, so it puts transform in @-webkit-keyframes. I don't think that's a good approach. It needlessly doubles the transform declarations. All those versions of Chrome still understand -webkit-transform, so might as well stick to just that
Autoprefixer is good for those who just don't want to have to worry about prefixes or doing all the research needed to really optimize their stylesheets
If you want to optimize your stylesheet, you'll need to do quite a bit of research to find out where prefixes are needed and where they aren't, where unprefixed declarations are needed and where you can leave them out, etc. Prefixes are a pain either way ;)

Using double vendor prefixes for animations and other attributes

Example 2, as this is the style of output I would expect from an autoprefixer tool, for example: enter link description here

Which prefixes are needed with animations?

Since only WebKit browsers can apply @-webkit-keyframes rules, it doesn't make any sense whatsoever to include any other prefixes inside those rules.

You want to include other prefixes for the @keyframes rules, not the properties within them. The properties inside use matching prefixes where appropriate:

@-webkit-keyframes bounce {
    0% { -webkit-transform: scale(0); }
    100% { -webkit-transform: scale(1); }
}

@-moz-keyframes bounce {
    0% { -moz-transform: scale(0); }
    100% { -moz-transform: scale(1); }
}

@-o-keyframes bounce {
    0% { -o-transform: scale(0); }
    100% { -o-transform: scale(1); }
}

@keyframes bounce {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

(There is no @-ms-keyframes, and it is not necessary to use -ms-transform in @keyframes.)

CSS Transform & Transition which prefixes (e.g. -o-) are necessary?

Staying up-to-date with prefixing is a never-ending endeavor that one might want to commit to or, like me, abandon for the sake of better/easier solutions.

Personally, I am from the hard-core purists who put quality of code over functionality. I therefore don't prefix anything.

I know that this is something that is not acceptable for many cases where things need to work on as many machines as possible - for example when you work on client projects - and started to use CSS pre-processors that automatically prefix your CSS code to support a specified set of machines (for example "last 5 versions of all major browsers", or "90% market share"). This way, your code stays clean and you still have a neatly prefixed production-file. Pre-Processors can also do many other handy things; nesting CSS and variables is only two of those things.

To also give a real answer to your question: Can I use... is a good service for seeing browser-support on a given CSS property. It also tells you which browser still needs prefixing for a property.

Why do developers write CSS animation rule without prefix?

So not every modern browser requires prefixes. Infact the CSS community want to move away from them as a general consensus, as they are essentially a reminiscent of the browser wars. In some use cases, they can be helpful. Your example allows support for IE9, whereas IE10+ wont require this prefix.

Some developers don't want to support legacy browsers, some do. It's that simple. All depends on your needs.

How Should You Prefix Transform Properties in CSS3 Animations