How to Change Text Color Smoothly on Mouseover

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*/
}

 

Result:

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.

Previous Entries How to Show Static Page on Home in Wordpress Next Entries Telenor Advance Balance

10 thoughts on “How to Change Text Color Smoothly on Mouseover

  1. An impressive share, I just now given this onto a colleague who had previously been conducting a little analysis during this. And he the fact is bought me breakfast due to the fact I ran across it for him.. smile. So allow me to reword that: Thnx for the treat! But yeah Thnkx for spending any time to talk about this, I’m strongly about it and really like reading regarding this topic. If it is possible, as you grow expertise, do you mind updating your site with a lot more details? It is highly of great help for me. Big thumb up just for this blog post!

  2. 商業貸款 擁有完善的財務安排應付資金需求及現金周轉,是您業務成功的關鍵。工銀亞洲可以為您度身訂造財務組合,讓您充分把握業務發展機會。為協助貴公司妥善理財,配合個別業務營運的不同需要,我們提供一應俱全的服務,從日常透支以至不同形式的融資安排等等,應有盡有。商業/工業融資 我們提供各類型的信貸服務,包括透支、商業/工業借貸、樓宇按揭貸款、履約保證金、各項擔保及發票及期票貼現等,並由資深的客戶服務經理提供個人跟進服務,全心全意與您建立長遠的合作關係。

  3. I just want to mention I am beginner to weblog and definitely enjoyed you’re web page. Most likely I’m likely to bookmark your blog . You really come with beneficial articles and reviews. Thanks a bunch for revealing your web-site.

  4. 全「身」趨勢!LSD真空無痛技術,無需使用冷凍啫喱,比傳統激光脫毛更安全,更舒適,更快捷。腿部背部永久脫毛,只需15分鐘!最快激光脫毛科技 配以22x35mm 及 9x9mm 治療機頭,比其他品牌之24mm為大,覆蓋肌膚範圍更廣。 因而更能縮短療程時間及次數。專為亞洲皮膚而設 因應不同膚色設定不同能量,無論膚色較深或較白均適用 最舒適及最有效的激光脫毛體驗 (與755nm及1064nm作比較) 設真空脫毛技術 LUMENIS LightSheer® Desire 激光脫毛儀備有真空脫毛技術,令激光能量更集中聚焦,達至更快及更有效之療程效果。

  5. Spot on with this write-up, I honestly feel this amazing site needs a great deal more
    attention. I’ll probably be back again to read through more, thanks for the information!

  6. Woah! I’m really enjoying the template/theme of this blog.
    It’s simple, yet effective. A lot of times it’s hard
    to get that “perfect balance” between user friendliness and visual appearance.
    I must say you have done a very good job with this. Also, the blog loads very fast for me on Safari.
    Excellent Blog!

  7. 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