Super simple introduction to CSS3 animations.

One of my new favorite features of CSS3 is the ability to quickly make animations, without needing to use anything like javascript. Not that I think anything is wrong with javascript, but man, using CSS3 to make things animate is damn easy. The only downside to it is that IE doesn’t quite support it yet (surprise surprise!) and in Safari I have found that it’s still a little rough–but if you are using it on your personal site or on a client that doesn’t really mind I say go nuts. Eventually they’ll work like a dream in all browsers!

Depending on when you are reading this blog post, assuming I haven’t changed my site since, you can see an example of simple CSS3 animations in my header right now. When you load any page on my website you’ll find that my name and social networks come sliding in from the left/right and even have a fancy little kick back at the end. This is done completely in CSS.  If you are visiting my site after I’ve got bored of my current design and you no longer see the animations it used to look something like the image below with the title and social icons flowing in from the sides on load:

Screen Shot 2013-01-27 at 12.59.07 AM

(Pretty sweet, I know.)

The way that I have the header setup is using the @keyframes command which allows you to setup different frames based on percentages for the CSS to load. So for example if you wanted something to flow in from the left you’d write something like this:

@keyframes animationname {

0%   {margin-left: 99999px;}
100% {maring-left: 0px;}
}

Even though people often call JavaScript an easy language to learn you can without a doubt see how doing simple animations with CSS3 is even easier. All you have to do is create various steps and define how the CSS should look. 0% being the second the page loads and 100% being by the time the animation is done.

Now you are probably wondering how exactly the browser is supposed to know when the animation is done, as in how long should this animation go on. The answer is fairly easy. All you need to do is define how many seconds you want it to run in the class using “animation” so let’s say that we want the above keyframe to go from 99999px to the left to 0px to the left in 2 seconds (which is sickly fast) what you’d want to do is write the following:

animation: animationname 2s;

What you are essentially doing with this line is you are first giving the animation a name (in this example it’s just animationname) and then saying how long it should last from 0-100%.

Still pretty simple so far right? Now your CSS3 animation call should look like this:

#div {

animation: animationname 2s;

@keyframes animationname {

0%   {margin-left: 99999px;}
100% {maring-left: 0px;}

}

}

At this point the way it’s reading is that everything inside of the #div div will start with a left margin of 99999px and then end with a left margin of 0px after 2 seconds of time passed–that’s it you’ve created a simple CSS3 animation.

Now if you want to make it even fancier all you have to do is start declaring more percentage steps in the class, so, to keep following the example of how my header area works right now what you’d want to do is introduce another step with a right margin to create the little kickback effect from the slide in. To do that you’d just want to rework it a bit like so:

#div {

animation: animationname 2s;

@keyframes animationname {

0%   {margin-left: 99999px;}

50%   {margin-right: 50px;}

100% {maring-left: 0px;}

}

}

Now what you’ll be left with is, as you can assume, a 3 step process. First it’ll go to the left, then a little kick to the right, and then it will center itself out. The end result will be exactly as the “Zackery Fretty” area on the top of this page is on my site. Easy Peasy.

You’ll want to be sure to add in all of the browser specifics for the animation, it’s needed currently for it to work as best as possible. So the final final code should look something like the following:

#div {

animation: animationname 5s;
-moz-animation: animationname 5s; /* Firefox */
-webkit-animation: animationname 5s; /* Safari and Chrome */
-o-animation: animationname 5s; /* Opera */

@keyframes animationname {

0%   {margin-left: 99999px;}

50%   {margin-right: 50px;}

100% {maring-left: 0px;}

}

@-moz-keyframes animationname {

0%   {margin-left: 99999px;}

50%   {margin-right: 50px;}

100% {maring-left: 0px;}

}

@-webkit-keyframes animationname {

0%   {margin-left: 99999px;}

50%   {margin-right: 50px;}

100% {maring-left: 0px;}

}

@-o-keyframes animationname {

0%   {margin-left: 99999px;}

50%   {margin-right: 50px;}

100% {maring-left: 0px;}

}

}

CSS3 will never completely replace JavaScript, obviously, but for simple animations like what I’ve got going on my website and what I spoke about in this tutorial I can’t imagine why you’d want to not go this route, it’s a wonderful development and landslides easier! Now we just have to wait for better browser support, which will come only with time. Until then I’ll keep experimenting with CSS3 animations on my personal site!