Register form with HTML5 using placeholder and CSS3 part 2

You have probably seen the first part of this tutorial. Like I told you in the second part we will make that form look better using CSS3.
But that’s not all. I told you that this form will have an animate effect but not using JavaScript only CSS3. I know you probably know this property and what it does. If not: CSS3 transitions are effects that let an element gradually change from one style to another.

This is the whole CSS3 code for the register form. Notice that in the HTML I have used fieldset, legend properties so that your form have a name. Using HTML5 placeholder attribute the text shown in the inputs. It’s working very good on input type password and on textarea as well. So having this attribute you don’t need JavaScript plugins or other things to do that.

This CSS property can be used in many different ways. Not only on input's but creating a menu or using them on image slider. It’s up to us how do we want them to be used.
So let’s explain the code above. You probably sow that for each browser I had to declare the transition independently. I will talk about the -webkit support because the same rules apply to the other browsers as well.

In the first declaration transition-duration property defines the length of time that a transition takes. On the second line transition property property specifies the name of the CSS property to which the transition is applied. Finally transition-timing-function property describes how the intermediate values used during a transition will be calculated. It allows for a transition to change speed over its duration. These effects are commonly called easing functions. In either case, a mathematical function that provides a smooth curve is used.

I could talk about the rest of the CSS code but you probably know what it does so in stead of making a huge post I’ll stop here.
If you want me to explain the rest of the code please write me an comment and I’ll promise that I’ll explain in details the rest of the code. But mainly I used CSS3 for all the elements so it looks better.

CSS transition compatibility:

Firefox
Safari
Chrome
Opera

Unfortunately in IE it’s not working but if you test it in IE you can see that in IE8 and IE9 the focus that makes the input’s bigger are working. In IE7 the :focus it’s not working.
So what I want to say is that this form it’s not quite optimized for IE. I hope you don’t mind.