Start Experimenting With CSS3 Keyframe Animations

July 2010

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.

<div class="box1"></div>
<div class="box2"></div>

Now apply some basic styling so we can see them.

.box1{
  width:200px;
  height:200px;
  background:rgba(255,0,0,0.5);
  position:absolute;
  top:100px;
  left:50%;
  margin-left:-100px;
}

.box2{
  width:200px;
  height:200px;
  background:rgba(0,0,255,0.5);
  position:absolute;
  top:100px;
  left:90%;
  margin-left:-100px;
}

And you've got yourself two boxes.

demo1.gif

View demo.

Setup the animation affect

Setup the animation affect and call it 'movingbox'.

@-webkit-keyframes movingbox{
  0%{left:90%;}
  50%{left:10%;}
  100%{left:90%;}
}

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.

demo1.gif

View demo.

Apply the keyframe animation

Our last step applies the magic to the object of our choosing. We're going to apply it to 'box2'.

.box2{
  -webkit-animation:movingbox 5s infinite;
}

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).

demo3.gif

View demo.

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.

@-webkit-keyframes movingbox{
  from{left:90%;-webkit-transform: rotate(0deg);}
  to{left:10%;-webkit-transform: rotate(360deg);}
}

View demo.

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
solar.jpg

Our Solar System using pure CSS3 for planets and orbits.

Future Of Web Design
fowd.jpg

404 pages are always a nice place to experiment with stuff that only us geeks will get.

Hard Boiled Web Design
hardboiled.jpg

If the teaser site is anything to go by this book from Andy Clarke should be a good CSS3 reference.

Massive Blue
massive.jpg

Sam Brown's portfolio animation is subtle but beautifully executed.

Ecliptic
ecliptic.jpg

This was my experiment, a hidden 'Easter egg' on the Ecliptic website.

Conclusion

In regards to usefulness, the CSS3 animations above aren't that. But they do let you, the designer, experiment with the latest techniques available.

Make a point of working a CSS3 animation into your next project just so you can get a feel for how they work. Then in the near future, when more browsers adopt them, you'll be able to make some really attractive user interfaces without a gif or Javascript effect in sight.

Have you experimented with CSS3 animations yet?

Further reading

« Great user experience with gradual engagement sign ups Why the iPad failed »