A neat visual demonstration of the the different timing functions for CSS transitions. Non-animators may not be familiar with these, so it’s helpful to see what they look like.
A re-creation of Apple’s demo iAd for Toy Story 3. Makes for a pretty good introduction to 3D transformations.
Nicholas Gallagher:
This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript.
It bears repeating that the point of experiments like this isn’t to replace logos with CSS, but to show that fairly complex designs can be made in CSS - and you’ll need that sooner or later.
A similar, and more useful, demo: CSS speech bubbles.
Modernizr is a JavaScript library that helps you branch your CSS depending on the browser’s capabilities. I haven’t tried Modernizr itself yet, but their website is a nice demo of some CSS3 features, like rounded borders, gradients, shadows, reflections, and transitions.
A little demo of progressive enhancements to website interaction - animations, simple fades - by SimpleBits.
Rich Bradshaw has a page with some examples of CSS transitions and animations. Succinct and well explained. Make sure you also check the official docs and do your own research on top of any tutorial you read. It’s still the early days for HTML5 and CSS3; things change, both in spec and in implementation.
Thought I would pass along an experiment where I was able to recreate almost all of Safari 4’s interface entirely in HTML5 and CSS3, taking advantage of Webkit’s css prefixes.
CSS world clocks by lensco. No images were harmed in the making of this excellent CSS demo. No JavaScript, even.
Here’s another thing I made while messing with WebKit’s CSS 3D transforms, transitions, and animations, based on their morphing power cubes demo.
The clock’s “wheels” are turned with JavaScript, but they’re built and animated entirely with CSS. Like the CSS Star Wars demo, for now this only works in Snow Leopard with Safari 4 or the WebKit nightly, and, surprisingly, on the iPhone. Try it here: CSS clock. I also made a CSS timer that works entirely without JavaScript, using only CSS animations.
