WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
SPONSORED LINKS
Advertisements

How to animate text color on mouse hover using CSS

Topic: HTML / CSSPrev|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.

Let's take a look at an example to understand how it basically works:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>CSS Smooth Text Color Transition</title>
  • <style>
  •     a {
  •         margin: 20px;
  •         -webkit-transition: color 1s; /* For Safari 3.0 to 6.0 */
  •         transition: color 1s; /* 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:

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.