How to Create Text Color Animation using HTML and CSS ?
Last Updated :
30 Jan, 2024
The text color can be changed according to the programmer’s choice using CSS @keyframes rule. In this article, we will see how to create text color animation using HTML and CSS.
Preview:
Approach:
- Create an HTML file with a centered <div> containing an <h2> element.
- Use CSS to reset default margin and padding for the body.
- Center the <div> element using absolute positioning and ‘transform’.
- Style <h2> with desired properties and apply a color animation using keyframes.
- Create a gradient background animation within keyframes, and use ‘-webkit-background-clip’ for text clipping.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Text Color Animation</ title >
< style >
body {
margin: 0;
padding: 0;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h2 {
font-size: 5em;
font-family: serif;
color: transparent;
text-align: center;
animation: effect 2s linear infinite;
}
@keyframes effect {
0% {
background: linear-gradient(#008000, #00FF00);
-webkit-background-clip: text;
}
100% {
background: linear-gradient(#3CE7D7, #000FFF);
-webkit-background-clip: text;
}
}
</ style >
</ head >
< body >
< div >
< h2 >GeeksforGeeks</ h2 >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...