The ultimate solution to typewriter animation 💪

The ultimate solution to typewriter animation 💪

Written by Yonkeu Steve on Jan 26th, 2022 ・ Views ・ Report Post

Yonkeu Steve Visit User Profile

Hey buddy, for the web newbies I've something fun today. Let's talk about something amazing, the Typewriter animation.

It looks like this: 👇 typewriter-animation-text.gif After long research, I found that it could be summarised into 4 steps:

Step 1: Write the HTML code

Write the HTML code to display the text.

<div class="writer">
    <div class="writer-text">Happy to contribute for OSS-Cameroon blog</div>
</div>

Step 2: Choosing an appropriate font

choose a monospace font type, like "Courier New", something sans-serif too. This is to simply ensure that the animation property takes one character at a time since monospace fonts are always of equal width.

.writer {
    font-family: Courier, monospace;
	display: inline-block;
}

Step 3: Using the CSS animation property

This effect is being achieved by playing with the width property of our text varying it from 0 to 100% in a linear fashion.

The beautiful blinking cursor that wipes and or wipes away the text is achieved by border-color animated from solid to transparent.

Step 4: Performing animation in a fixed number of steps and intervals

Our focus here is the animation-timing-function property which seems like a realistic typing effect.

What am I doing here? :sweat_smile:

  • Pushing the characters one at a time in a cool and realistic fashion.
  • Specifying the number of frames( steps by steps series of frames and the intervals between them).
.writer-text {
    display: inline-block;
  	overflow: hidden;
  	letter-spacing: 2px;
 	animation: typing 5s steps(30, end), blink .75s step-end infinite;
    white-space: nowrap;
    font-size: 30px;
    font-weight: 700;
    border-right: 4px solid orange;
    box-sizing: border-box;
}

The keyframes :sweat_smile:

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. 
@keyframes typing {
    from { 
        width: 0% 
    }
    to { 
        width: 100% 
    }
}

@keyframes blink {
    from, to { 
        border-color: transparent 
    }
    50% { 
        border-color: orange; 
    }
}

Full code:

<!DOCTYPE html>
<html>
<head>
    <style>
        .writer {
        font-family: Courier, monospace;
        display: inline-block;
        }
        .writer-text {
            display: inline-block;
            overflow: hidden;
            letter-spacing: 2px;
            animation: typing 5s steps(30, end), blink .75s step-end infinite;
            white-space: nowrap;
            font-size: 30px;
            font-weight: 700;
            border-right: 4px solid orange;
            box-sizing: border-box;
        }

        @keyframes typing {
            from { 
                width: 0% 
            }
            to { 
                width: 100% 
            }
        }

        @keyframes blink {
            from, to { 
                border-color: transparent 
            }
            50% { 
                border-color: orange; 
            }
        }
    </style>
    <body>
        <div class="writer">
            <div class="writer-text">Twinkle, twinkle, little star.</div>
        </div>

    </body>
</html>
### The result:
<div class="writer">
    <div class="writer-text">
    Happy to contribute for OSS-Cameroon blog.
    </div>
</div>

## Conclusion 💗

Open source is a great way to contribute to the community. Getting to know the community is a great way to contribute to the community and make things better.

Comments (1)