Start Experimenting With CSS3 Keyframe Animations
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.
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.
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).
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);}
}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
Our Solar System using pure CSS3 for planets and orbits.
Future Of Web Design
404 pages are always a nice place to experiment with stuff that only us geeks will get.
Hard Boiled Web Design
If the teaser site is anything to go by this book from Andy Clarke should be a good CSS3 reference.
Massive Blue
Sam Brown’s portfolio animation is subtle but beautifully executed.
Ecliptic
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
Related articles
20 Appreciated Comments
Have a comment? Tweet @leemunroe and I'll be glad to respond.
On the , Mark McCorkell said:
Nice demo, Lee! I was neck deep in CSS3 a few month ago when re-designing my site, but haven’t really been using it too much lately because I have been doing mostly design work. But this may have just gave me the kick in the ass I needed to start experimenting some more!
On the , DarkRedman said:
It’s an awesome demonstration and i love CSS3 features ! But when all main webbrowsers(such IE, Firefox, Safari, Chrome and Opera) will implements all CSS3 syntax and features ?!
On the , Peter Gasston said:
I actually think this is quite a clumsy syntax and these kinds of animations would be better performed with JavaScript. AFAIK none of the other browsers are interested in implementing this at the moment, so it may end up remaining a WebKit-only syntax.
On the , Lee said:
@Mark: Thanks Mark, let me know how you get on.
@DarkRedman @Peter: Interesting opinion. Curious why JS is better? Of course they’re not obligated to support it, but the fact it is in the W3C spec is a step towards further browser support.
On the , Peter Gasston said:
Just that, as I said, I find the syntax a bit clunky: first, it’s in percentages, so if you have, for example, a 6.5s long animation, and you want something to happen on exactly 4s, you’d have to get your calculator out to work out the percentage; second, inheritance acts on each keyframe, so if you want to have, for example, a border-width to change from 1px to 10px in the first frame, then something else to happen in the second frame, you have to specify the border-width again or else it reverts to the original value:
from {
border-width: 1px;
color: red;
}
50% { border-width: 10px; }
to {
border-width: 10px;
color: blue;
}
I just think you’d be better off using JS: first to control the timings, which could be specified in seconds instead of percentages; and second, to only specify the properties which need to change on each frame.
Being in the W3C spec just means it is being offered for review, it doesn’t make any guarantees that it will ever become a recommendation. I think if CSS3 animations do become a reality, it won’t be with this syntax.
On the , Lee said:
Good point Peter re. time specific animations, looks like it could do with some syntax improvements. Didn’t know about the inheritance problem either.
On the , M Burke said:
Or you could ~draw~ it in Flash using drawing tools rather than lines and lines of code… oh wait we don’t like Flash?
On the , Peter Gasston said:
Just after I wrote that comment I downloaded Safari 5.01 and I saw this in the changelog:
“More accurate timing for CSS animations”
I don’t know what that means yet, though; it doesn’t seem to be documented anywhere.
On the , pouya saadeghi said:
webkit is always cool :D
thanks
On the , Anthony Calzadilla said:
Hi Lee,
Good overview of keyframe animation. If anyone is interested in some complex examples of css3 animation check out:
CSS3 Starwars AT-AT Walker
http://www.anthonycalzadilla.com/css3-ATAT/
CSS3 Spiderman
http://www.optimum7.com/css3-man/
On the , Siteroom said:
As nice as they are, it’s difficult to see them being used in production until they’ve been standardised across all the web browsers. Nice introduction though.
On the , keith said:
Wow! thanks for sharing. This is cool css3 animation experience.
On the , Mauritius Web Design said:
Awesome its such a shame that some browsers is still incompatible with CSS3 btw thanks for sharing
On the , CSS load said:
Awesome!!! I also would recommend http://cssload.net, which is the first loading css animation generator
On the , Endy said:
what a great css3 function….amazing..
On the , Ravinder said:
Great Tutorial
On the , nathanS said:
I was wondering if you would know how to make one div use the keyframe animation by rolling over a different div?
On the , 7ooof.net said:
cool thanks
On the , inventory said:
Awesome! i learn something new from here. Thanks
On the , dave said:
See http://www.css3builder.com. It does all the math for the keyframe timings to create a pure css3 gallery. Get the timing exactly right for each project. I built it to save time, like hours.