How to show the Text letter by letter using CSS

Mostly we can see the complete text with some animation or transition in the website. But we can display the Text letter by letter like Typewriter text effect using CSS animation properties.

Steps() function in CSS

Steps is a timing function that split the animation or transition’s time duration into equally sized intervals. It specifies whether the change in output percentage happens at the start or end of the interval.Using this function, we can control the text transition and show the letter one after another.

Syntax of steps function

The first argument denotes the number of intervals that apply for the transition. The second argument specifies the point at which the change of values occur within the interval. In the below example, we are going to specify the animation time as 8s and the interval specify as 60. So the transition will apply and display the character one after another for 8/60 = 0.13 s.

Example

Output

Display letter one after another using CSS animation
Display letter one after another using CSS animation