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.