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:
Article Tags :
Recommended Articles