Advanced CSS3 Tutorial 11: Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
This is also using Pseudo Classes.
Here is an example of what we'll be doing today: http://dark-knight.net/example2.html

This isn't supported by Internet Explorer.

p {
   color:#000;
   -webkit-transition:color 1s ease-in;
   -moz-transition:color 1s ease-in;
   -o-transition:color 1s ease-in;
   transition:color 1s ease-in;
}
p:hover{color:#f00;}

"transition:color 1s ease-in" It transitions the color slowly, and takes 1 second.

"p:hover{color:#f00;}" is a Pseudo Class that tells the browser when <p> is hovered over to change the color.