How to Change Text Color Smoothly on Mouseover

27 May 2013

CSS Tricks, WebMasters

Text Color Change Animation

If you want to make text color changing animation (change color smoothly) in your website. You can do this with CSS3 (latest version of CSS). There is a transition property that let us create animations for changing style on mouseover etc.

How to Create Text Color Changing Animation:

For changing color of any element on mouseover (:hover), below is the CSS code.

#element {
color:red; /*Initial Color*/
transition: color 1s;
-webkit-transition: color 1s;

#element:hover {
color:blue; /*Final Color*/



The above code will result as the following text

This is an Example Text

If you take mouse over this text, color of this text will smoothly change from red to blue.

, , , ,

One Response to “How to Change Text Color Smoothly on Mouseover”

  1. Frederica Ghibaudy Says:

    I must tell you that it’s hard to find your posts in google, i found this
    one on 14 spot, you should build some quality backlinks in order to rank your page,
    i know how to help you, just search in google – k2 seo tips and tricks


Leave a Reply