Trying Out A Simple CSS3 Animation

Trying Out A Simple CSS3 Animation

Simple animation, harder to implement

That sums it up quite nicely I think. If you click on the demo below (my actual redesign) and look at it in Chrome (or Safari, though I didn’t look I’ll assume it works there), you will notice that when you roll over the social media icons in the right sidebar, they will change size. I was very proud of myself for accomplishing what I think very few web developers actually use. I’ll go over what I think about CSS3 Animations at the end of the article, but for now, let’s go over how I accomplished this.

View Demo


Cool eh? Until you actually see how much CSS is needed to accomplish this. Keep in mind that I wrote this in Sass (and using Compass’ built in CSS3 mixins), so it actually took waaaaay less lines to do. What I’ll show you though is the actual CSS output that you would have to write if you are NOT writing Sass…which is most of you. The icons are in an unordered list, just so you are informed

The first part are the styles for the li’s:

#social ul li {
list-style: none;
float: left;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-animation-name: resize2;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}

As you can see I have a transform: scale on there that is actually keeping it the actual size it should be. That is because there is a hover on the li that will increase its size, so I need the un-hovered li to be at the default. After that you have a call to an animation called ‘resize2′. Remember that, because you’ll see what is going on with that in a bit. I want the animation to last a half second, iteration-count means how many times and I only want it to run once, and then I want it to ease in and out smoothly. So far so good?

Now for the li:hover styles:

#social ul li:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-animation-name: resize;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}

There are two things different here. First I am scaling the size to 1.1 of what the actual size is. This says that when you hover over the ‘li’, make it bigger. Second, I am calling an animation called ‘resize’. NOW for the fun stuff.

Animations – Think of Flash frames written out as text commands

That is exactly what came to mind when I was writing it last night. Remember when I said remember ‘resize2′? Well here are the two actual animations that the li’s are calling:

@-webkit-keyframes resize {
	0% {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	}
  100% {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  }
}
 
@-webkit-keyframes resize2 {
	0% {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	}
  100% {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  }
}

Looks like a sort of jQuery function or if/else statement…or something. Either way, it is crazy to look at, and it helps if you think of it as a Flash tween. The first animation, ‘resize’, is actually for the ‘li:hover’, which says at 0% (think frame 1 in Flash) start out at the default size, and at 100% (last frame in Flash animation) make it 10% bigger (the 1.1). The ‘resize2′ animation does the exact opposite which is called out on the ‘li’ (meaning when you are not hovering on it).

There is one side effect on this and that is that when you reload the page, it starts the animation ‘resize2′ because you are not hovering. Doesn’t bother me, and I find it actually cool so I left it the way it is.

Now that I’ve done it, what do I think?

Ok, I wrote my first actual CSS3 animation. I think it is cool, and I have rolled over it about 50 times just to give myself a pat on the back each time. What is your first thought when looking at all of that? That is a lot of css, isn’t it? Pretty much what I thought, and that is just to get the social icons to grow big and small on the hover. Now imagine if you have a ton of other crap that you want to do slick little animations to.

What made this a non-thing for me is that Sass and Compass make writing something like this easy. But writing it out like most of you would seems like a serious pain in the ass. I could have written something similar using jQuery in like 5 lines of code and in about 10 minutes. On the one hand I find it cool that this was done using only CSS. On the other, it is only supported in 2 browsers (Chrome and Safari) and 1 Beta…I hope (FF 4). It does the scaling in FF 3.6, just not the smooth animation. jQuery would have hit all of them.

I am torn between thinking how cool that is, and if something like this should even be in CSS. This goes beyond the basic styling of an element. This is doing some functionality on top, that to me can be more efficiently done in jQuery, so why in the world would I do this again? I will, but it is more of bragging rights than because I should.

My question to you though is two fold: Should CSS be handling this, and if yes, why would you when you could get it done quicker and with less using javascript?

If you want to read more on cool CSS3 animations, transitions and transforms – I highly recommend this.

Coupon Code: webmachine

Tags:

Leave a Reply