Setup the animation affect

movingbox is the name we're giving the animation. It's up to you what you want to call it.

The keyframes we've setup for this animation are at 0% (start), 50% (halfway through) and 100% (end). The properties we've set at these keyframes are different positions. You can set any properties you like here.

This was my experiment, a hidden 'Easter egg' on the Ecliptic website.

Conclusion

In regards to usefulness, the CSS3 animations above aren't that. But they do let you, the designer, experiment with the latest techniques available.

Make a point of working a CSS3 animation into your next project just so you can get a feel for how they work. Then in the near future, when more browsers adopt them, you'll be able to make some really attractive user interfaces without a gif or Javascript effect in sight.