How to animate text color on mouse hover using CSS

Topic: HTML / CSS« Prev|Next »

Answer: Use the CSS3 transition property

You can use the CSS3 transition property to smoothly animate the text color of an element on mouseover, such as a paragraph of text or a hyperlink.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>CSS Smooth Text Color Transition</title>
  • <style type="text/css">
  •     a {
  •         margin: 20px;
  •         -webkit-transition: color 2s; /* For Safari 3.0 to 6.0 */
  •         transition: color 2s; /* For modern browsers */
  •     }
  •     a:hover {
  •         color: #ff0000;
  •     }
  • </style>
  • </head>
  • <body>
  •     <h1><a href="#">Hover on me</a></h1>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.