CSS Animations For Frontend Engineers

© 13 September, 2013, Martin Rinehart

CSS3 works in all modern browsers, desktop and mobile. It does not work in Microsoft browsers IE 9 and before.

CSS3 features animations, changes in element styles that morph from one value to another in a series of steps over time. Without JavaScript, animations begin when the page is loaded (after an optional delay, if you specify one).

Animation Demonstration


The Animated Div

The demo div, animation styles first: name and duration, top line. alternate means reverse directions, alternate iterations. linear is the timing function (default is ease).

The @Keyframes Rules

One plain, one for -webkit-. The only difference is the name of the rule (you copy the entire contents).

Start with 0% and end with 100%. Call these from and to if you prefer. Use as many intermediate frames as you like.

Feedback: MartinRinehart at gmail dot com

# # #