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
|
1 |
steps(<number_of_steps>, [start | end]) |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html> <head> <title>Display the Character one after another in the String</title> <style type="text/css"> p{ color: yellow; font-family: "Arial"; font-size: 30px; margin: 10px 0 0 10px; white-space: nowrap; overflow: hidden; width: 30em; /* added animation property to show the character one at a time*/ animation: type 8s steps(60, end); } /*set the background colour of div element to black */ .wrapper { background-color: black; } @keyframes type{ from { width: 0; } } </style> </head> <body> <div class="wrapper"> <p>To Be Continued...</p> </div> </body> </html> |
Output
Recommended Articles
