You can now produce stunning animations with CSS3. Did you know that? Of course you did.
CSS3 animations are the new kid on the block. It’s a big step. Although they haven’t really taken centre stage yet as only the webkit browsers support them.
For this reason they’re used sparingly, in a lot of cases for experimental purposes or as ‘hidden gems’, but that doesn’t mean you should shy away from getting stuck in.
It was only recently I experimented myself so I thought I’d share a beginner’s demo with you.
How to do CSS3 keyframe animations
Keyframe animations involve you setting the object state (or property) at different stages of an animation.
Setup the environment
Let’s setup a little demo. I’m going to start with two basic boxes.
Now apply some basic styling so we can see them.
And you’ve got yourself two boxes.
Setup the animation affect
Setup the animation affect and call it ‘movingbox’.
movingbox is the name we’re giving the animation. It’s up to you what you want to call it.
The keyframes we’ve setup for this animation are at 0% (start), 50% (halfway through) and 100% (end). The properties we’ve set at these keyframes are different positions. You can set any properties you like here.
So far we still have two static boxes.
Apply the keyframe animation
Our last step applies the magic to the object of our choosing. We’re going to apply it to ‘box2’.
movingbox calls the animation we want to use, which we have already defined.
5s states we want the animation movement to last 5 seconds.
infinite means the animation will keep going and going.
We now have a CSS3 animation - box2 should be moving from right to left and back again. (Note: remember this only works in Safari and Chrome).
More CSS3 animation properties
This is a very simple example I have used here, and is just to help beginners get started.
For the -webkit-animation property, there are a number of other values you can try:
- -webkit-animation-name: [any name you like];
- -webkit-animation-iteration-count: [number, infinite];
- -webkit-animation-timing-function: [linear, ease,ease-in, ease-out];
- -webkit-animation-duration: [time];
- -webkit-animation-delay: [time];
For the @-webkit-keyframes rule, instead of using percentage as keyframes, we can also declare a from and to state. You can also make it transform while animating.
CSS3 animations in action
See if you can spot the @keyframe animations on these sites (note: you’ll need to use a webkit browser like Safari or Chrome to see the animations in action).
Our Solar System using pure CSS3 for planets and orbits.
404 pages are always a nice place to experiment with stuff that only us geeks will get.
If the teaser site is anything to go by this book from Andy Clarke should be a good CSS3 reference.
Sam Brown’s portfolio animation is subtle but beautifully executed.
This was my experiment, a hidden ‘Easter egg’ on the Ecliptic website.
In regards to usefulness, the CSS3 animations above aren’t that. But they do let you, the designer, experiment with the latest techniques available.
Have you experimented with CSS3 animations yet?