How To Use HTML And CSS To Implement Typing Effect ·

This article tells you how to use HTML + CSS to achieve typing effect.

Table of Contents

1. How To Implement Typing Effect Use Html + CSS.

You can think there are 3 layers of the typing effects.

The bottom layer is the text layer.
The middle layer is the background that cover the text.
The top layer shows the cursor.

The text layer is static, while the background in the middle layer and the cursor at the top layer are dynamic.
Initially, the background covers all the text and the cursor is at the far left point.
As the animation progresses, the background and cursor move from left to right at the same pace.
At the end of the animation, the background no longer covers the text, and the cursor blinks on the far right point.

2. Example Source Code.

Create a Html file implement_typing_effect_use_html_css.html.

Copy and paste the below Html source code to the above file.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Implement Typing Effect Use Html + CSS</title>
<style>

:root {
    /* number of characters in the displayed string in the html div element. */
    --steps: 56;
    /* animation duration, the total time that will cost to print the text string. */
    --duration: 10s;
    /* font size */
    --fontSize: 50px;
    /* cursor size */
    --cursorSize: 20px;
}

.text {
    color: #333;;
    position: relative;
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--fontSize);
    line-height: 1;
}

.text::after {
    content: '';
    width: var(--cursorSize);
    height: var(--fontSize);
    background-color: black;
    z-index: 2;
    position: absolute;
    animation: blink 1s var(--duration) step-end infinite,
               moveCursor var(--duration) steps(var(--steps)) forwards;
}

.text::before {
    content: '';
    width: 100%;
    height: var(--fontSize);
    z-index: 1;
    position: absolute;
    background: linear-gradient(#fff, #fff) no-repeat top right;
    animation: showText var(--duration) steps(var(--steps)) forwards;
}

/* Cursor blink animation */
@keyframes blink {
    0% {
        background-color: black;
    }
    50% {
        background-color: transparent;
    }
    100% {
        background-color: black;
    }
}

/* Cursor move animation */
@keyframes moveCursor {
    0% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}

/* background move animation */
@keyframes showText {
    0% {
        background-size: 100% 100%;
    }
    100% {
        background-size: 0% 100%;
    }
}



</style>
</head>
<body>

<div class="text">This typing effect is implemented use Html & CSS!</div>

</body>
</html>

How To Use HTML And CSS To Implement Typing Effect

1. How To Implement Typing Effect Use Html + CSS.

2. Example Source Code.

3. The Demo Video For The Typing Effect Animation.

Leave a Comment Cancel Reply