CSS Tip #12 - Typewriter Effect #shorts

Key Takeaways

so a nice little CSS text effect you can add to your website is this typewriter effect I used it on my older website and I really liked it and the cool thing is you don't need any JavaScript to do this so I've got some text here inside a paragraph tag that I want to apply this typewriter effect to and in the CSS we have a selector for that which is already applying some very basic Styles now to add the typewriter effect we just need to animate the width of the element from zero to its natural width so start the width off at zero and also the Overflow property should be set to Hidden and then white space is set to no wrap so that the text doesn't wrap to the next line so now add a keyframes animation called type and all we want to do is say that the width goes to 21 CH th is a CSS unit that denotes a character width you can play around with this value depending on your text now apply that animation to the paragraph So it runs over two seconds and also we can use the steps function in the animation to stack at the keyframes so it's more choppy like it's act brighter I've used 21 to say do the animation in 21 steps the number of steps is roughly the same number of the letters in the text the last keyword forwards means stay at the final position of the animation one more thing we also need a blinking cursor to do that we'll add a border right property to the paragraph and specify a solid border with a width of three pixels which is some color or other black in my case to make it blink add a new keyframes animation called blink which has three stages from 50 and 2 or a start middle and end and all we're doing in this is animating the Border color from black to transparent and back to black again to get that blinking effect finally apply this animation to the paragraph over 0.5 seconds add the steps function to specify one step for each stage and then we want it to be infinite as well so it keeps blinking at the end and now we can see in the browser we get that typewrite effect using only CSS awesome