Day # 12: Typewriter Effect

I have always loved the typewriter effect. This may be explained by the fact that I’m a writer and I have a certain weakness to old school utensils. However, I had always found ways to achieve that effect with Javascript. I always thought there had to be a way to do so with only HTML and CSS… and I found it!

A Youtuber called Clueless Expert came up with a method that I found very ingenious, and it comprises the styling of the border like this to achieve the effect of the blinking cursor:

border-right: 5px solid;

Then, he created an animation on the text using the CSS animation-timing-function and the stepping function steps(): that specifies a stepping function, specifying the number of intervals in the function. In this case, the steps should match the number of characters of the text, which in our example are 17.

    animation: 

        typing 2s steps(17),

        cursor .4s step-end infinite alternate;

Both animations are in charge of, on one hand, changing the color of the border above mentioned, and on the other, to make the cursor “disappear” each step of the way.

@keyframes cursor {

    50% {

        border-color: transparent

    }

}

@keyframes typing {

    from {

        width: 0

    }

}

As frontend developers, we are always going to find new ways to do some things. The important thing here is to be able to analyze and understand them so we can incorporate them into our projects.