How to Create Typewriter Animation using HTML and CSS ?

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:

Screenshot-2024-01-09-111027

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:

erf

How to Create Typewriter Animation using HTML and CSS ?

L

lakshgoel204

Improve

Article Tags :

Similar Reads

How to create a progress bar animation using HTML and CSS ?

In this mini Web Development project we will utilize CSS animations and create a progress bar using them. The progress bar will start from zero and go to a certain extent as we want. The progress bar is basically showing the expertise of a programmer in different languages in animated form. Prerequi

How to Create Loading Blur Text Animation Effect using HTML and CSS?

The blur text animation is known as the Smoky effect and is used to give the text a blurry animation. The text blurs linearly in one direction and then reappears. In this article, we will create a loading blur text animation effect using HTML and CSS. Approach: The approach to create loading blur te

How to Create Ghost Text Animation on Hover using HTML and CSS?

Ghost Text Animation can be used to give your website a spooky heading or sub-heading, this effect can be easily created using some simple HTML and CSS. HTML Code: In this section we have a ul tag which consists of some li tags displaying some text. [GFGTABS] html <!DOCTYPE html> <html lang

How to Create Typewriter Animation using HTML and CSS ?

A typewriter animation simulates the appearance of text being typed out letter by letter, using only HTML and CSS. This effect is a simple yet eye-catching way to bring dynamic text to life on a website, capturing attention without the need for JavaScript. It's a great technique to make key text ele

How to Create an Animated Search Box using HTML and CSS ?

The task is to create an Animated Search Box using HTML and CSS. The search bar is one of the most important components of the website. Basically, it is used for connecting people with websites. In the face of complicated web content, users express their needs by searching keywords, expecting to obt

How to create text-fill animation using CSS ?

A text-fill animation using CSS is a visual effect where the content of text gradually fills with a color, gradient, or pattern over time. This animation can create dynamic, eye-catching effects for headings or titles by adjusting properties like background-size, clip-path, or keyframe animations. A

How to create animated banner links using HTML and CSS?

Links are one of the most important parts of any component that is used in website making. Almost every component had some form of links in it. A common example is a menu/nav-bar. All we see is some button like home, about, etc. but under the hood they all are links. Sometimes there comes a situatio

How to Create a Dot loading Animation using HTML and CSS?

The Dot Loading animation can be used to enhance the user interface of a website, it can be added while the website loads. This animation can be easily created using HTML and CSS. HTML Code: In this section we will create the basic structure of the dot loader using a div tag which will have some spa

How to Create Gradient Background Animation using HTML and CSS ?

Gradient animation can be added to the background of your websites by using simple HTML and CSS @keyframes rule that generate the desired animation. HTML Code: In the following example, the basic structure of the HTML page is implemented. [GFGTABS] HTML <!DOCTYPE html> <html lang="en

How to create Gooey Balls animation using HTML & CSS ?

The Gooey Balls loader is a basic CSS animation, where we will make a loader animation with two balls running in an animation effect that looks like the balls are rotating in motion. In this article, we will see how to create the rotating pass-through balls animation loader using HTML & CSS. App