Yokwejuste
WiseView

WiseView

The ultimate solution to typewriter animation ๐Ÿ’ช

The ultimate solution to typewriter animation ๐Ÿ’ช

The alternative javascript

Yokwejuste's photo
Yokwejuste
ยทJan 27, 2022ยท

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • Step 1: Write the HTML code
  • Step 2: Choosing an appropriate font
  • Step 3: Using the CSS animation property
  • Step 4: Performing animation in a fixed number of steps and intervals
  • Full code:
  • The result:
  • Conclusion ๐Ÿ’—

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

It looks like this: ๐Ÿ‘‡

Happy to contribute for OSS-Cameroon blog.

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:

@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:

Happy to contribute for OSS-Cameroon blog.

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.

ย 
Share this