How to apply CSS3 Tranisition property to the links?

CSS3 has bring the revolution to web designing and developing. It has been decorated with variety of characters, easy to adapt and simple to use. In the recent post we have created a tutorial based on shadow effect around the main layout which is derived from the CSS. Enhanced properties which are covering CSS3 are Radius Properties, Shadow Properties, Borders and many other Transition Properties. In this article we will use transition properties to anchor text which will slowly change the color of anchored text on hover. Let's see how can we succeed by doing some very easy simple steps.

DEMO

Hover your mouse on it.

Transition Property to Anchored Text

Follow the easy steps :

Open your blogger dashboard.
Click on Template >> Edit HTML >>Proceed.
Now search of a:hover. In my case it looks like

a:hover { color:#2266BB; text-decoration:underline;}

Now what we have to do is very simple. Paste the following code in between the braces.

-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.5s;

Now the code will look like this.

a:hover { color:#2266BB; text-decoration:underline;-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.5s; }

Now search for other Anchored texts like li a:hover , Post-title a:hover , Sidebar li a:hover and do the same for all anchored texts. If you are facing difficulty in finding just search for a:hover and it will navigate you through all the anchored text.
Save your template and see the magic :)