CSS Transitions

This one i never used it up until today… i thought it was some crazy hacky thing, but it’s actually really cool.
Basically, you add this attribute to the element that you want to animate, it takes 2 parameters (that i know of):

1. The CSS property’s name that you want to animate of the current selector.
2. THe time that the animation will take to execute.

The code below will animate an anchor tag from a RED background to a GREEN background when you hover the mouse over it:
On hover, the background will change to green, which will trigger the transition.

a {
                background:red;
		transition:background 1s;
		-moz-transition:background 1s; /* Firefox 4 */
		-webkit-transition:background 1s; /* Safari and Chrome */
		-o-transition:background 1s; /* Opera */
}
a:hover { background:green; }

Live example here: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition1

About these ads