👨‍💻 | How To Create Typewriter Effect Using Pure CSS

Typewriter Effect


Hey There! 👋 Today in this guide we're going to tell you how can you create typewriter effect using css. there are a lot of different options are of doing it but using just pure css makes it simple & easy. Without wasting time let's get started!


Steps to Create Typewriter Effect Using CSS:


  1. Create a text element :

  2. First of all we need to create a text element here for example i'm going to create h1 tag as my text element and put text "Typewriter Effect" inside it as you can see below:


    <h1>Typewriter Effect</h1>

  3. Format It

  4. So before we will do anything its important to format it to look good. Here i am using some css properties below :




    body{

    /*To Remove Extra Margin & Padding*/

    margin:0%;

    padding:0%;

    /*To Align Body Content in Center*/

    display:flex;

    align-items:center;

    justify-content:center;

    }

    h1{

    font-weight:900;

    color:#000;

    text-shadow:2px 2px #000;

    }


    That's it now I'm quite satisfied with little decent h1 styling, So move in to our important step and animate it to work.


  5. Animate it

  6. Okay to create typewriter effect using css i am going to use animation property on text element to show Typewriter effect. Our code to animate text element goes like this :




    h1{

    font-weight:900;

    font-family:sans-serif;

    color:#000;

    text-shadow:2px #000;

    /*To Hide overflows while typing*/

    overflow:hidden;

    /*To save text from wrapping while effect*/

    white-space:nowrap;

    /*To Create Cursor*/

    border-right:2px solid #000;

    /*To Stay cursor at correct positio*/

    width:17ch;

    /*animation name, time & function*/

    animation:typing 2s steps(17) ;

    /*animation : name duration steps(text length);*/

    }

    @keyframes typing{

    0%{width:0ch;}

    100%{width:17ch;}

    }


    We had first attempt to hide any overflow of text while our animation using overflow property. Then we had used used warp property and no-wrap value to prevent text from wrapping while our animation starts.

    we had used border-right property to create a cursor, and finally i had mentioned a animation property in which there is a animation name then duration then a function steps (to run it step by step smoothly) make sure get your text length before creating animation here my text length is 17 ch (characters), you had to replace your text length from all properties where we had mentioned 17. You can find your text length by just executing this simple code in console :  "your text".length


  7. Done! Just run the code

  8. Okay Enjoy you had learnt how to create typewriter effect with css.

Please share this post with your friends and bookmark our website for more informative content.

Don't forget us to follow on Instagram.

Comments

Popular posts from this blog

4 Most Easiest Programming Languages For Beginners | With My Experience & Suggestions

How To Shutdown PC using Python