The Basics of CSS3 Transitions and Transforms

The Basics of CSS3 Transitions and Transforms

Let’s talk about support

First off, we know for a fact that Safari and Chrome support Transitions, because we’ve all been using one of them to see the cool crap people have been doing. FireFox 4 will support it and they keep adding to it all the time. IE9, as of what I have read, will not. They are still missing a lot of other things, so this is not surprising. But since it is still too early to tell, who knows what the final product will have. The main thing to know is, if you haven’t started getting your CSS3 chops down, you should start. It won’t be long before we are using it on a regular basis. Personally, I use quite a few, but transitions is one that I have stayed away from.

The basic syntax

If you have used CSS3 styles, then you are used to the vendor prefixes. They might be annoying, but they make sense and it just means some additional copying. A simple transition you might have seen is to fade in the background color of a button. Here is what the CSS would look like:

a { 
width: 100px;
height: 30px;
text-align: center;
padding: 15px 0;
display: block; 
color:#ffffff;
background-color: #000000;  
-webkit-transition:background-color 1s ease-in;  
-moz-transition:background-color 1s ease-in;  
-o-transition:background-color 1s ease-in;  
transition:background-color 1s ease-in;  
} 
 
a:hover {
background-color: #ff0000;
}

It turns out that I had nothing to be afraid of, and neither should you. Type in the vendor prefix, then the colon, followed by the property you are transitioning, the amount of time you want the transition to take, and finally the type.

Skew, Scale, Rotate, and Translate

What? These are simple, yet cool. Ever create a button where the text was set at an angle, but you had to use Photoshop to do it? Well, Rotate will keep the text as actual text, and make it easier to fix if someone needs to change what it is saying. Here is what the CSS would look like for each of these:

Skew:

.box {
-moz-transform:skew(20deg);
-webkit-transform:skew(20deg);
-o-transform:skew(20deg);
transform:skew(20deg);
}

Scale – the numbers are percentages, where 1 = 100%:

.box {
-moz-transform:scale(1, 1.5);
-webkit-transform:scale(1, 1.5);
-o-transform:scale(1, 1.5);
transform:scale(1, 1.5);
}

Rotate:

.box {
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}

Translate:

.box {
-moz-transform:translate(100px, 100px);
-webkit-transform:translate(100px, 100px);
-o-transform:translate(100px, 100px);
transform:translate(100px, 100px);
}

Easy right? Just remember that skew will distort, scale changes size, rotate turns, and translate moves. But what if you want to do more than one transition or transform? That’s what you want to know now, right? Well, good thing I did the demo that I’ll link to later, or I wouldn’t have known. There was a lot of trial and error, smiles and clapping, swearing and finger pointing at the screen, and….some discovery.

You can’t eat just one!

First thing to remember: you can only have one transform or transition…how do I say this without confusing the crap out of you…property ‘line’. Better if I show you…

This is the BAD:

-webkit-transform: scale(1.5,1.5);
-webkit-transform: rotate(30deg);

Why is that bad? Oh my god, I just pasted that in, give me a second you impatient lot. Because like every other property, the second one overwrites the first. For some reason I thought the above would be different though. They are different transitions right? Yes, but of course…no. Here is what it should look like:

-webkit-transform: scale(1.5,1.5) rotate(30deg);

There is one main syntax part to note when doing multiple transitions vs transforms: use a space between each different transform, and a comma to seperate each transition. You can view my little demo below (Safari or Chrome at the moment), and immediately after is the CSS for the bottom button.

View Demo

#backMovement a {
	color: #ffffff;
	display: block;
	width: 120px;
	height: 50px;
	padding: 15px 0 5px;
	text-decoration: none;
	text-transform: uppercase;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	border: 1px #f60 solid;
	text-shadow: 1px 4px 8px #F60;
	-moz-box-shadow: 1px 4px 8px #F60;
	-webkit-box-shadow: 1px 4px 8px #F60;
	box-shadow: 1px 4px 8px #F60;
	-moz-transform: scale(1.5,1.5) rotate(30deg) translate(50px, 50px) skew(20deg);
	-webkit-transform: scale(1.5,1.5) rotate(30deg) translate(50px, 50px) skew(20deg);
	-o-transform: scale(1.5,1.5) rotate(30deg) translate(50px, 50px) skew(20deg);
	transform: scale(1.5,1.5) rotate(30deg) translate(50px, 50px) skew(20deg);
	background: url(images/grid.jpg) no-repeat 0px -104px;
	-moz-transition: background-position 1s, color 1s ease-in, text-shadow 1s ease-in;
	-webkit-transition: background-position 1s, color 1s ease-in;
	-o-transition: background-position 1s, color 1s ease-in;
	transition: background-position 1s, color 1s ease-in;
}
 
#backMovement a:hover{
	background-position: 0 0;
	color: #F60;
	text-shadow: 1px 4px 8px #fff;
}

Let’s wrap this up

You can obviously see that there is a LOT of lines of css for this stupid button. It’s not even that great looking and it took 31 lines of CSS (block form of course)! Now, think about this…you want to add a gradient, use multiple images, and god knows what. I realize that realistically a lot of the CSS would be trimmed off of this button because most likely you are not going to rotate, skew, translate, color change, background position movement and who knows what else I put on there. BUT…if you think about it, most of that is not that far fetched.

Here is something else to consider. Let’s say you make the button in Photoshop and it is on an image sprite. Which can you do faster, the CSS method or the image method, and what will the actual file size contribution be? Meaning which will weigh more? You do still need the background image for the CSS method. What you do save in the long run, is time on any changes.

One thing I like about the making a button this way is that you can have chunks of the CSS stored in snippets, so that if you need a particular part, you don’t have to write it from scratch every time.

What are your thoughts on this? Let’s here ‘em!

Coupon Code: webmachine

jQuery junkBox

.scroll();
This event is sent to an element when a person scrolls to a different place in the element. Below, a message displays when a person scrolls within an element with the class ‘content’.

$('.content').scroll(function() {
alert('You are scrolling');
});

Tags:

Leave a Reply