Swinging keyframe animation

Using CSS3 keyframe animations, we can control the exact style of an element at any point in time. Here we use keyframes to create a swinging effect, by modifying an element's rotation gradually over time until resting position, or 0 degrees.

Flipboard CSS buttons

Flipboard creates a series of CSS buttons that flip horizontally on themselves when the mouse rolls over them, creating an elegant, eye catching effect.

Rollover Text Menu

This CSS menu creates the popular rollover text effect of text sliding up to reveal a duplicate of itself when the mouse rolls over a menu item. It uses CSS2 generated content to first duplicate the menu item's text, then CSS3 transitions and transform to slide up the original menu text.

Split Drop Down Menu

Using a combination of CSS2 selectors, pseudo classes, CSS3 transitions, plus a tough of JavaScript, we arrive at a CSS based split menu button, even sans images!

Animated UL background effect

This CSS example demonstrates animating the min-width property of an element to create a stretching background effect. Here we use the technique to add a nice rollover effect to UL lists, so the user can easily home in on a particular list item by mousing over.