A Quick Lesson in CSS3 Animation

Hey guys! Long time no post… I’ve been busy working on awesome client projects as well as crafting an identity for my new company: Rocket Mouse Design. Over the weekend I wanted to whip up a simple landing page with some simple CSS3 animation. I learned a few things along the way and wanted to share.

Not So Simple…

So I have a rocket in my logo (which is still a work in progress). I wanted my rocket to launch on my ‘launching soon’ landing page. Sounds easy right? I can picture the code in my head. I ran into some snags along the way and learned a few things.

What I wanted to do was translate the position of the rocket after a few seconds (or on hover) and make it fly off the screen. So I did something like this:

#rocket {
-webkit-transition: 1s;
}

This makes the animation take 1 second.

And then on hover make it fly off the screen. I chose to use the body element because its the whole thing!

body:hover #rocket {
-webkit-transform: translate(0,-600px);
}

Check it out in action:
http://jsbin.com/agicu4/5

Wait… Rockets Don’t Do That…

You will notice that after the hover the rocket comes back! (what kind of rocket does that?!?!?1)

I needed the animation to run its course and then stop. After a bunch of googling I gave up and tweeted about it.

Luckily I have some awesome and helpful friends on twitter that pointed me in the right direction.

After some reading and research, it looked like animation-fill-mode in conjunction with animation-iteration-count was what I needed. Here’s the most succinct explantions I’ve found:

“The animation-fill-mode property allows you to define the styles of the animated element before and/or after the animation executes. A value of backwards causes the styles in the first keyframe to be applied before the animation runs. A value of forwards causes the styles in the last keyframe to be applied after the animation runs. A value of both does both.”

From http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

The ‘animation-iteration-count’ property defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once.

From http://www.w3.org/TR/css3-animations/#the-animation-iteration-count-property-

So here’s what the code looks like:

#rocket {
position:relative;
top:0px;
-webkit-transition: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
}

body:hover #rocket {
-webkit-transform: translate(0,-600px);
}

Check it out in action:

http://jsbin.com/omowi5

This Isn’t Working! WTF?!?!??!

Well it seems that I’m kinda dense (derp!) and didn’t realize that animation-fill-property only works with keyframes. So lets get some simple keyframes in there!

I don’t know about you, but looking at complex css animations with keyframes is kind of overwhelming. Lucky for me I really only have 2 frames in this animation. So I can use the from and to syntax, which basically created a 0% keyframe and a 100% keyframe.

#rocket {
position:relative;
top:0px;
-webkit-animation-name: rocket;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay:5s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
}

@-webkit-keyframes rocket
{
from {top:0px;}
to {top:-600px;}
}

See it in action: http://jsbin.com/efoni5/10

Don’t Forget To Clean It Up!

And with some nifty css shorthand properties here’s the cleaned up css:

#rocket {
position:relative;
top:0px;
-webkit-animation:rocket 2s 5s 1 normal forwards;
}

@-webkit-keyframes rocket {
from {top:0px;}
to {top:-600px;}
}

I’ve always been kinda iffy about css animation – because things get complicated really fast. In this case I think the animation adds a bit of fun and context that will help make my site memorable.

Check out the landing page and subscribe if you want to know when its launched!

http://rocketmou.se

How About You?

So thanks for making it to the end of this post! I’d love to hear about how you guys are using CSS3 animation in your web design work and what snags you have run into. Chances are others out there are running into the same problems.