How to Create Typewriter Animation using HTML and CSS ?
Approach: To achieve the typewriter effect we will use the following CSS properties.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
- animation-timing-function: We need to specify the time of the animation in seconds or milliseconds so that the animation is faster and looks perfect. We also need to specify steps so that each letter appears not in a single flow but one by one as seen in typewriters. In the below code we are using the example GeeksforGeeks as the total number of letters in GeeksforGeeks is 13, so the number of steps used is 13.
- overflow: So that each text appears according to the animation and is not revealed all at once, overflow: hidden is used in the below code.
- white-space: To get the animation on a single line white-space: nowrap is used.
- border-color: As seen in the below code the border color is animated from black too transparent to give the animation a realistic touch of a blinking cursor any color other than black can also be used.
- width: To get a typing like animation width is animated from 0% to 50% (this can vary as per the text height/width or the given text spacing).
Example: In this example, we will be going to use above-defined properties to create typewriter animation.
Note: For other longer or shorter text, required changes should be done in font size, steps. The time of the animation of text and the cursor should also be changed accordingly.