JavaScript-Free (CSS3) Animation

A word or two about vendor prefixes

The use of "prefixes" in CSS attributes and properties is both a blessing and a curse. They enable browser companies to add experimental support for things like CSS animations before support for the features are fully cooked.

Here's how it's supposed to work: if a website has CSS animations enabled using non-prefixed animation properties, only browsers that have fully cooked support for the properties will show the animation; the rest of the browsers that require special prefixes will not. When a browser's support for an experimental feature feels ready, the need for the prefix is removed.

In theory, only web developers that want to experiment along with the browser companies use vendor prefixes. In practice, however, this is a bit silly. Most web developers want their animations to run in the maximum number of browsers so they typically don't care if a feature is experimental, they enable it using vendor prefixes and move on. The use of a prefix does not hinder anyones desire to use experimental features.

There is a possible dark side to this: stylesheets that are bloated with multiple versions of each animation property, one for each vendor prefix. So, five lines of CSS3 properties quickly becomes 10 lines or more depending on how many prefixes need to be supported. This is something to keep in mind as you do your own experimentation with animations. If you absolutely do not need to support a browser that requires prefixes, perhaps you should skip it.

Currently, there are four prefixes that are in various states of use today:

Prefix Browser
-ms- Internet Explorer
-o- Legacy versions of Opera
-moz- Firefox
-webkit- Chrome, Safari, and recent versions of Opera

There is an order in which prefixed properties should be listed. It's fairly simple to remember: prefixed properties always preceed non-prefixed properties. This is due to the cascading nature of stylesheets: the last definition of a supported property will be the one the browser uses and the others that preceded it will be ignored. In theory, all browsers that support animation will drop the prefixes and support the properties as described in the specification.

Side note: if you will be using lots of CSS animations and want to streamline authoring your CSS, you may want to look into a CSS pre-processor like Sass or Less. With a pre-processor, you can create a function that takes one CSS attribute and outputs one line for each prefix, so you type one line instead of five.

Use of these pre-processors is beyond the scope of this how-to, but it's worth mentioning anyway.