CSS animation is an incredibly useful and powerful tool. It can add interest or creative excitement, direct the user's eye, explain something quickly and succinctly, and improve usability. For that reason, recent years have seen more and more animation on sites and in app.

CSS animation is a method of animating certain HTML elements without having to use processor and memory-hungry javascript or Flash. There's no limit to the number or frequency of CSS properties that can be changed. CSS animations are initiated by specifying keyframes for the animation: these keyframes contain the styles that the element will have.

Animated content reveal effects seem to be quite popular right now, and used properly they can capture user focus and engage your audience. You’ve seen this before: a block of  color grows from one side or another horizontally or vertically, and then retreats to the opposing side, this time revealing some text or an image beneath. It’s a concept that might seem tricky but really relies on just a few things.

With CSS3 transitions you have the potential to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted.

Animations within CSS3 allow the appearance and behavior of an element to be altered in multiple keyframes. Transitions provide a change from one state to another, while animations can set multiple points of transition upon different keyframes.