Proper transition: transform CSS for Android 4.4 browser, Chrome and Safari

Suppose you want CSS transitions for CSS "transform" property on mobile devices (Android 4.4 and above, iOS Safari 7 and above). You'd write

.example {
    transition: transform 1s ease;
}

But what about browser support for CSS 2D transforms and 3D transforms? They require "-webkit-" vendor prefix. No problem, you just add another line

.example {
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
}

Stop. That won't work: the former rule is overridden by latter. OK, then combine them into one rule. Browsers should either ignore unknown transition property or use transition for both:

.example {
    transition: transform 1s ease, -webkit-transform 1s ease;
}

Surprise! Safari 7.X (and probably 8.X) doesn't comply to the specification and ignores the whole rule, not only the unknown "transform" property. The only way to write transition cross-browser is

.example {
    transition: -webkit-transform 1s ease;                    /* 1 */
    transition: transform 1s ease;                            /* 2 */
    transition: transform 1s ease, -webkit-transform 1s ease; /* 3 */
}

Let's analyze it with regard to intended browser support:

• Safari 7.X and 8.X will accept rule 1 and ignore the rest because of unknown "transform" property. That's fine - they will use transition for the "-webkit-transform".
• The same applies to WebKit-based browsers in Android 4.4
• Chrome and Safari 9+ will accept rule 1, then override it with rule 2, then override it with rule 3. That's fine too - they will use transition for both prefixed and unprefixed transforms.

The easiest way to avoid such traps is to use Autoprefixer to automatically add vendor prefixes to CSS rules.