Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Animate CSS text-decoration-color property
The CSS text-decoration-color property controls the color of text decorations like underlines, overlines, and line-throughs. You can animate this property to create smooth color transitions in text decorations.
Syntax
selector {
text-decoration-color: color;
animation: animation-name duration timing-function;
}
Example: Animating Text Decoration Color
The following example demonstrates how to animate the text-decoration-color property from the default color to orange −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-text {
font-size: 24px;
text-decoration: underline;
text-decoration-color: blue;
padding: 20px;
animation: colorChange 3s infinite;
}
@keyframes colorChange {
0% {
text-decoration-color: blue;
}
50% {
text-decoration-color: orange;
}
100% {
text-decoration-color: blue;
}
}
</style>
</head>
<body>
<h1>CSS text-decoration-color Animation</h1>
<p class="animated-text">This text has an animated underline color.</p>
</body>
</html>
A page displaying text with an underlined decoration that smoothly transitions from blue to orange and back to blue every 3 seconds.
Example: Multiple Text Decoration Colors
You can also animate between multiple colors using different keyframe percentages −
<!DOCTYPE html>
<html>
<head>
<style>
.rainbow-text {
font-size: 28px;
text-decoration: underline overline;
text-decoration-thickness: 3px;
padding: 30px;
animation: rainbow 2s infinite;
}
@keyframes rainbow {
0% { text-decoration-color: red; }
25% { text-decoration-color: yellow; }
50% { text-decoration-color: green; }
75% { text-decoration-color: blue; }
100% { text-decoration-color: red; }
}
</style>
</head>
<body>
<h1>Rainbow Text Decoration</h1>
<p class="rainbow-text">Rainbow underline and overline!</p>
</body>
</html>
Text with both underline and overline decorations that cycle through rainbow colors (red, yellow, green, blue) every 2 seconds.
Conclusion
The text-decoration-color property can be smoothly animated using CSS keyframes to create engaging text decoration effects. This technique works with underlines, overlines, and line-throughs.
Updated on: 2026-03-15T13:36:43+05:30
266 Views
Advertisements