Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS3 text-decoration-color Property Animation</title> <style> a, a:visited { color: blue; font-size: 24px; text-decoration: underline; -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */ animation: test 4s infinite; } /* Standard syntax */ @keyframes test { 50% { -moz-text-decoration-color: red; /* Firefox */ -text-decoration-color: red; } } </style> </head> <body> <p><strong>Warning:</strong> The text-decoration-color property is only supported in Firefox and require -moz- prefix. You should better avoid using this property.</p> <p><strong>Note:</strong> 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.<p> <p><a href="#">This is a hyperlink.</a></p> </body> </html>