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!

walking_with_css_1

Animate.css

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.

animate_css_2

Madmanimation

Short movie done through CSS3 animation.

mad_animation_3

Space CaCSS

Animated CSS3 background patterns.

space_cacss_4

April/Zero

CSS3 animation on display.

april_zero_5

Slavery Footprint – Made In A Free World

great storytelling with some simple HTML5 and CSS3 animation

css3_animation_6

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.

gfx_7

Border Transitions

CSS3 Border Animation.

border_transition_8

Published by

Joaquin

I am web designer/developer, creative blogger, wordpress user & founder of idesignow.

One thought on “8 CSS3 Animation Experiments & Frameworks”

Comments are closed.