How to Create Text Color Animation using HTML and CSS ?
The text color can be changed according to programmer’s choice using CSS @keyframes rule.
HTML Code: The following code snippet creates HTML div element which contains the text for modification.
<!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 > </ head > < body > < div > < h2 >GeeksforGeeks</ h2 > </ div > </ body > </ html > |
chevron_right
filter_none
CSS Code: The following code snippets demonstrates the design of the text using some basic CSS properties along with CSS @keyframes rule to change the color of the text to produce the animation effect.
<style> body { margin : 0 ; padding : 0 ; } div { position : absolute ; top : 50% ; left : 50% ; transform: translate( -50% , -50% ); } h 2 { font-size : 5em ; font-family : serif ; color : transparent ; text-align : center ; animation: effect 2 s 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> |
chevron_right
filter_none
Complete Code: It is the combiantion of the above two code sections.
<!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 > |
chevron_right
filter_none
Output: