8 CSS3 Animation Experiments & Frameworks

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components: A style describing the animation and a set of keyframes that indicate the start and end states of the animation’s CSS style, as well as possible intermediate waypoints along the way. Below is a CSS3 animation round-up that shows you the mighty power of CSS and what you can achieve with its help.

Walking With CSS

The walking man (me) above, is implemented using only CSS3 animations and simple HTML. You can read more about how it was implemented here. Be sure to view this experiment on an iPhone, iPod or iPad (or android device). It’s super cool!



animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.



Short movie done through CSS3 animation.


Space CaCSS

Animated CSS3 background patterns.



CSS3 animation on display.


Slavery Footprint – Made In A Free World

great storytelling with some simple HTML5 and CSS3 animation


GFX – a 3D CSS3 animation library for jQuery

GFX integrates CSS3 transforms and transitions into jQuery, making it stupidly simple to create sophisticated and gorgeous animations.


Border Transitions

CSS3 Border Animation.