CSS Animations and Keyframes

DEMO

GITHUB

One of our vendors (css + html5 magician named Mike Kellog) did this: http://www.google.com/campaigns/gonegoogle/

It’s impressive on it’s own, but the fact that it’s using nothing but html5 and css3 animations, makes it one of the coolest things I’ve seen on the web lately.

I decided to give it a go… so I made this. I used the same images but decided to write the code from scratch so I’d have a good idea about how it works. I’ll explain below…

Something to note before I get into this. There are going to be a ton of tools coming out that help you create html5 animations. Sencha has a pretty cool one. Adobe (of course) is coming out with one. Even Motorola is getting in the game.  These guys have something that looks interesting as well. Tumult has a tool that might be good for making banners. You may find yourself learning to code something by hand that newer developers will simply animate with a program. As soon as these tools are reliable and html5/css3 specs are the standard, you might consider investing some time to learn the tools…

Anyway, there are a couple tricks to getting started and avoid major headaches.

1. We want our animations to be “hardware accelerated.” Some CSS animations are not automatically hitting your processor and are instead trying to execute from your browser. To ensure that we hit the cpu, use “-webkit-transform: translateZ(0);”. This will tell your browser to get ready for some 3D action. Even though we may not use it, we want the hardware acceleration that comes with it…
2. You text will look a little jenky during animations. To help with this, use “-webkit-font-smoothing: antialiased;” to smooth things out while text is flying across your screen.
3. Sometimes your animation will flash just before it begins. To fight the flash we use “-webkit-backface-visibility: hidden;” which tells the browser, oh heck I don’t know, just use it.

Ok now for the cool stuff. Rather than posting a ton of code here, I made a demo here. Go to it and inspect the element if you want to see what’s going on. I’ll just briefly explain how all this works:

#animate {
    -webkit-animation: animation-name 5.5s ease-in-out 0s;
}

@-webkit-keyframes animation-name {
    0% {  top: -45px; left: 0px; opacity: 0; }
    50% {  top: -45px; left: 0px; opacity: 0; }
    100% {  top: -45px; left: 103px; opacity: 1; }
}

For brevity’s sake I took out alot of the stuff I just talked about. Basically, you attach an animation to the element you want to animate and give it a name. Then you attach a @keyframe to the animation name and specify some style rules to change. In case you’re wondering about the shorthand syntax I’ll explain below:

#animate {
    -webkit-animation: [animation-name] [duration (seconds)] [timing] [delay];
}

That’s it! With this tool, you can build pretty much anything flash can build…except it’ll take you 10x longer and won’t be cross browser compatible. Oh and you can’t use the webcam. Anyway…feel free to head over to the demo and see how it works. I also put it up on github.

DEMO

GITHUB