text-decoration-color - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:text-decoration-color

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. text-decoration-color

Introduction

The text-decoration-color property is only supported in Firefox and require -moz- prefix.

In the following code the color of the text decoration line of the following hyperlink is animating from its initial value "blue" to "red", and back to the initial value "blue" again up to infinite times.

-webkit- prefix is for Chrome, Safari, Opera.

-moz- prefix is for Firefox.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 text-decoration-color Property Animation</title>
  <style type="text/css">
a, a:visited {
  color: blue;
  font-size: 24px;
  text-decoration: underline;<!--from w  ww.  j a  v  a2s  .co  m-->
    -webkit-animation: test 4s infinite; 
    animation: test 4s infinite;
}

@keyframes test {
    50% {
    -moz-text-decoration-color: red; 
        -text-decoration-color: red;
  }
}
</style>
 </head>
 <body>
  <p> </p>
  <p><a href="#">This is a hyperlink.</a></p>
 </body>
</html>

Related Tutorials