MultiWEBPress
Wordpress & Shopify Experts

MultiWEBPress
Wordpress & Shopify Experts

Typing Text Animation CSS | Typewriter text effect CSS | Pure HTML & CSS

CSS Typing Text | MultiWebPress

Hello readers, today in this blog you’ll learn how to create Typing text Animation using pure HTML & CSS only. This program is for beginners who really want to learn new stuff using HTML & Css. Previously, I have shared an Animated Text Background with CSS Stroke, Now it’s time to create a Typewriter Animation effect using HTML & CSS.

Generally, A Typing Animation CSS is a simple typing effect with a blinking cursor. To achieve the typewriter effect, the width property of text is being animated from 0% to 100%. We have shown you a typing animation effect using pure CSS, which can give you an elegant look to your text & your whole website

As you can see in the above images, there is text showing a typing effect with a blinking cursor to make your website very cool and awesome. There are numerous ways to create animation, one of which is the Typing Animation effect to your text.

If you’re having difficulty in understanding what is written in this blog. You can also watch the full video just scroll down.

Video tutorial of Typing Animation CSS

You may also like:

I believe you like this Typing Animation CSS. You can also use this Typewriter typing animation CSS text on your website or any project you want. And you can take this Typing Animation CSS to the next level with your creativity. Also I want you all to comment below if you have any question in your mind. Let’s move to the next step.

If you like the Typing Text Animation and want to get codes of this, you just need to scroll down.

Typing Text Animation CSS [Source Codes]

To create this small task (Typing Animation CSS). You need to create two files. The two files are index.html and another one is a style.css file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file. 

Now, create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with .html extension

HTML CODE

				
					<!DOCTYPE html>
<!--Code by Multiwebpress-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Animated Text | Multiwebpress</title>
</head>
<body>
    
        <div class="wrapper">
            <div class="text">I'm a </div>
            <div class="run-text">
                <ul>
                    <li><span>Youtuber</span></li>
                    <li><span>Developer</span></li>
                    <li><span>Coder</span></li>
                    <li><span>Freelancer</span></li>
                </ul>
            </div>
        </div>

</body>
</html>

Next, create a Cascading Style Sheet(CSS) with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with .css extension

CSS

				
					*{
    padding: 0; margin: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.wrapper{
    display: flex;
    border: 5px solid black;
    padding: 25px;
}

.wrapper .text{
    color: #000;
    font-size: 60px;
    font-weight: 400;
}

.wrapper .run-text{
    margin-left: 15px;
    height:90px;
    line-height: 90px;
    overflow:hidden
}

.run-text li{
    list-style: none;
    color: orange;
    font-size: 60px;
    font-weight: 400;
    position:relative;
    top:0;
    animation: slide 12s steps(4) infinite;
}


@keyframes slide{
    100%{
        top:-360px;
    }
}

.run-text li span{
    position: relative;
    max-resolution: 5px 0;
    line-height: 90px;
}

.run-text li span::after{
    content:"";
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    border-left: 3px solid black;
    animation: typing 3s steps(12) infinite;
}

@keyframes typing{
    40%, 60%{
        left: calc(100% + 30px);
    }
    100%{
        left: 0;
    }
}

Well after creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)

That’s all, now you’ve successfully created a Typing Animation Text using HTML & CSS.

If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.

Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on instagram.

Thanks in Advance!

Download Code Files

SHARE

WhatsApp
Facebook
Twitter
LinkedIn
Telegram

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*

MOST POPULAR
SHARE
CATEGORY
Categories

ABOUT US

MultiWebPress is a full-service web development agency that creates custom websites and online stores using WordPress and Shopify. Our team of skilled developers and digital strategists offer personalized solutions, including ongoing maintenance and support, to help businesses succeed online.

QUICK LINK

FOLLOW US

Facebook-f Youtube Instagram Twitter

Copyright © 2023 MultiWebPress | All Rights Reserved