We’ve been looking at CSS3 a bit this week, particularly the webkit implementation of it, and we’re amazed. This is going to be great for progressive enhancement to sites viewed in modern browsers.
We had no idea it was possible to keyframe and then trigger animations within CSS! Some use cases that spring instantly to mind are:
- News tickers
- Modal dialogue boxes
- Image galleries
- Loading spinners
We can’t seem to animate the background gradients, and the trigger events are restricted to the :pseudo classes (realistically, :hover, :active, :focus), but nonetheless, it’s amazingly functional. The accordion is a bit screwy too because we’ve hosted it in an iframe, you can see a better version here.
Some of the our favourite features are 2D and 3D transforms, keyframe animation, easing, multiple transforms and auto starting animations.
You’ll see that the source code CSS is all over the place in the example above, this is not meant to be a masterclass, just a playground. Here are the resources and tutorials we used:
- CSS3 . Info – All you ever needed to know about CSS3
- CSS3 Transitions – Are We There Yet? | samuli.hakoniemi.net
- Cubic Bezier Timing Function
- CSS3 Wizardry
- Surfin’ Safari – Blog Archive » CSS Animation
- Safari CSS Visual Effects Guide: Introduction
- Safari CSS Visual Effects Guide: Animations
- Safari CSS Visual Effects Guide: Transforms
- Super Cool CSS Flip Effect with Webkit Animation
- web design | Nimbupani Designs