How to Create Text Color Animation using HTML and CSS ?

Last Updated : 11 Jun, 2020

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> 

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%); 
    } 
  
    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> 

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> 

Output:

My Personal Notes

Related Articles