JavaScript-Free (CSS3) Animation

Introduction to CSS Animations

"Animates" the values of CSS properties over a span of time. Although there are no literal "keyframes" or frames of any kind in this technology, at least not in the context of actual animation (Maya 3D or Flash, for example), it is often said that the animation is governed by "keyframes." Lacking a better term, we'll use that one.

Having said that, CSS animations offer a decent amount of granular control over how animations occur, their duration, how many times they loop, as well as other settings that you may or may not use in practice.

As with just about any current draft of the CSS3 and HTML5 specifications, the specifications themselves do not actually tell you what is or is not supported in any specific browser. For that information you need to turn to other sources like the companies that produce the browsers or collector sites like caniuse.com. As you will see, support is inconsistent and often requires special "prefixes" in the implementation.

Min. browser versions: (taken from caniuse.com)

Browser Version Notes
Internet Explorer (desktop) 10
Internet Explorer (mobile) 10
Chrome 30 Requires -webkit- prefix.
Chrome 30 Requires -webkit- prefix.
Firefox (desktop) 27
Firefox (Android) 33
Safari (desktop) 5 Requires -webkit- prefix.
Safari (iOS) 6 Requires -webkit- prefix.
Android Browser 2.3 Requires -webkit- prefix.
Chrome (Android) 40 Requires -webkit- prefix.
Opera 12 Requires -webkit- prefix.
Opera Mobile - Not supported.

So, what's all this stuff about prefixes? Read the next page and you'll find out.