Loading..

×

Typing CSS Animation

In this project, we utilized the typing.js library to craft a captivating typewriting animation. By following just a few simple steps, we successfully achieved a stunning CSS text typing effect, as showcased in the banner above.

Follow these steps to implement a typing CSS animation on your webpage.

Guidelines to configure typing css animation to your webpage.

  • 1. Copy and paste the below code to your HTML file where you want to create text typing animation.
    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text typing animation by sahil haryana</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>I'm <span class="auto-type"></span></p>


    <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
    <script src="script.js"></script>
</body>
</html>
  • 2. Now create a style.css file and copy paste the below CSS code to your CSS file. You can modify the code as per your requirements
    •         body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: black;
        }
        p{
            font-size: 50px;
            color: white;
            text-shadow: 0 0 10px yellow;
            font-family: sans-serif;
            font-weight: bold;
        }
        span{
            color: yellow;
            position: relative;
            top: 0;
            animation: colorful 6s infinite;
        }
        @keyframes colorful {
        100% {
        filter: hue-rotate(360deg);
        }
        }
  • 3. Now create a javacript file called:- script.js copy paste the below JavaScript code to your Javascript file and don't forget it to link with HTML file
    • var typed = new Typed(".auto-type",{
    strings : ["programmer", "Designer", "Youtuber"],
    typeSpeed : 150,
    backSpeed : 150,
    loop : true
});

A brief explanation about css text typing animation

In the first point we added the code for which we want to create text typing effect. basically in the span tag our typing animation will show. So span tag should be empty.


Now in the next step we used Tying.js library. so, for this we need to add typing.js CDN, Copy and paste the CDN from the 2nd step to your HTML file just before the </body>


And Finally from the 3rd step copy the javascript code and paste it in your javascript file. Basically in this code we need to add the words for which we want to create typing css animation, like wise in the above code we added for three words in the strings section:- "programmer", "Designer", "Youtuber", accordingly you can add the words for which you want to create text typing animation.

And also we can customized the speed of animation, loop functionality backspeed for typing animation If you want to create typing animation for infinite then add loop = true And also we can customized the speed for animation backspeed = 150 & typeSpeed : 150 you can change the speed accordingly.



Topics covered

typing css animation

text typing animation

typing animation

typewriting animation

css text typing animation

text typing animation css

×