Create a Typewriter CSS Text Animation (Typing Effect)

Key Takeaways

how to run guys who are you doing and welcome to bring you a trail from I pretty much today we're gonna got a quick video tutorial just a very simple and easy to follow up CSS animation choice so we're gonna be diving into how you can create a typewriter CSS animation using just only CSS and HTML so we're not gonna include any JavaScript or any code scripts or anything like that which is gonna be simply using normal CSS code with some animation behind the season of course just a simple HTML code to make that happen so before jumping into that I just wanna use a code sandbox I'm just gonna show you the quick preview in here so this is gonna be the animation we're gonna be creating at the end of this video tutorial so it's gonna have like a simple and minimal typewriter animation in has clearance in here I feel just refresh that back again I get this cursor you know blinking all the time and get the typewriter CSS text animation it just shows it you know like you are writing it in real time you can tweak um the values I'm gonna be like the animation values to make it look like more realistic and depending on your situation and how you want to use it you can pretty much take it out and you can have the most out of it behind the scenes in here so there's actually basically this animation I'm gonna be creating and yeah so I'm gonna use cosign box you can use whatever environment you want to work with you can use code pen or anything like that but I just prefer constrain box because it's much easier to work with and you know have live edits and someone and so forth so I just jump right into it so here we got a vanilla sand box we're gonna be working on so it's clear scene here everything is just you know super basic we don't have anything we don't need the JavaScript code so let's get rid of the script over here and we can do is delete the JavaScript code or the index HS since we don't need anymore we've got some empty parting here so that's all you need to just have an empty body and make sure to link your style dots as CSS I named it as CSS because I want to use a sass as my preprocessor for the style just you you know make it look much better use comments and stuff you can still use CSS because you know it doesn't have anything related to dance so it just depends on you and let me just change this group type so talk writer CSS animation and there you go so first things first let's jump into the style SES sense and start off with the first thing so I want to use the fonts or the font you saw earlier was from google fonts and it was named anonymous Pro fun so I'm just gonna do a real quick comport with these phones because you can just tell go and Google outs anonymous Pro and you can just go to phones Google calm and you could probably learn more about this funds in white super cool so I just want to use that because looks more to like a classical funds and you know it shows more an effect of how typewriters works and it just best fit for this particular example that's why I would love to use this in my case scenario the other type of things all we're gonna do is just simple HD I'm also I'm gonna do HTML and I'm gonna have like make it take the full width so I want the the HTML tag take the full width and the full height so just to make it take the full page I'm gonna have an overflow of a hidden so we're not gonna show up an overflow in here the old thing would have just doing a style to the body this body will gonna to take a full width and a full height for those of you who always follows me they probably have noticed that my keyboard sound has been changing that's why that's because actually if I've bought or I got a new keyboard so it's a much better I think for you guys to listen so let me know in the comments if it just makes too much noise or anything because that's um my brown keys Meccano keyboard so it might be a little bit louder than my previous keyboard so I'm going to do heights of 100% and I'm gonna change the font family for this so I'm just gonna create anonymous row and if it doesn't find that or any issues happening behind the scenes I'm just gonna go back to some surf which is the default funds I'm matching the background color to be something like okay so you're gonna do is gonna do like a color picker from the page so it was this cool extension and I'm gonna just call pick the the bank right here so i'm gonna choose something like this one probably this place there you go it has been copied just gonna paste it in here and you should look dark like this error is so it should be a little bit much better because you know have like whites over some dark blue color so that's why when i use the type a writer effects right over there so that's for the background color and the body in the HTML are both taking the full width in the full height of our canvas for our webpage in here now for for the containers we don't have anything right over there so i'm gonna just do a main container so this menu content is gonna hold up only the typewriter is textile so if you have like if you would love to add more than one you can just put them into this container and all they can have the same style applied which is pretty great actually so I'm gonna make this take the full width and a full height again I would love to use with containers rather than just putting it on bare minimum on the body because it's much safer to work with and for the styling for anybody comes out he's gonna understand what doing plus it is responsively you know if you can easily make it responsive by just putting containers and wrapping it up for this we're gonna put the color off FFF which is completely white as clearly seen here for the color picker it says RGB 255 255 and 255 for both RGB and I'm gonna use flex flex boxes design so just to make it centered and what I'm gonna do in here just gonna do flex direction so all the styles are gonna have like a flex direction off column so they come one beneath the other and for the other stuff we're gonna have this custom icon sense to center so we're gonna have centered horizontally to align Isis to Center it vertically so if you're not familiar with flexbox and how it works you can just gonna check out a youtube video tutorial on my channel just search for flax boxes or you'll probably find in the description below and how flexbox is basically works and why you should start using them ASAP and now what we're gonna do I'm gonna create a class that's gonna be representing the main points for our story so it's gonna have the typewriter text and it's gonna be applied to every single tax either a dev a P for a paragraph or span or any any kind of tank you would love to apply this typewriter animation to you just add this class and there you go you got the typewriter animation right out of the box so I'm sure that name is a typewriter - text so simple as that and what I'm gonna do I'm gonna say first do overflow:hidden and why overflow:hidden because want the text to be actually we can we could always show the text but overflow:hidden anything out of the bounding box it's gonna be completely hidden so we're not gonna see the text and that's how we can apply the animation this is a really important rule to add for your CSS and that we can do position:relative this is not quite you know it's you don't need to add that but it's quite optional but it's better to add it you have much more flexible silent animation working behind the scenes now for the width why you could do is actually you need to provide the full width of your text so depending on the length and the width of your text if you have like a really long text you need to provide more within here if you have like just a small or two words X or anything you can just provide a small width size in here because you have to specifically specify that otherwise the animation won't work perfectly so you have to do that for example the text you've seen earlier I'm gonna use 18 elements or so in here that's that's much better for me so that's what I would like to use and we're gonna assign a photo right now why portal right Boris is basically going to be use it for the blinking cursor use all so for the blinking cursor effects we need just to assign a border right to the container or to the typewriter text to whatever text we got the text container then later on we're just gonna have like you know apply animation to it so every single time it blinks a super-fast so it looks like a cursor as clearest in here this is actually a cursor so that's that's the animation that we want to achieve used in portal right so I'm gonna assign two pixels for the border right there you go I'm gonna have a solid of course I'm gonna do RGBA and what I'm using that's what I'm not just putting completely wise because I'm gonna have some alpha so I'm gonna have a path city of course between them to 255 255 255 I'm gonna do 0.75 just you have it's a little bit transparent and that will make the effect even more better for now we can do the font size so the font size I'm just gonna do about I don't know 35 pixels would look amazing and I'm going to do white space this one is also important so depending on the font size you kid I don't know you can give it a size of however you would like to style the text or anything you can apply all those textiles you can change the color or do type of things but I have to add the white space because this property what it allows us to do is to do not wrap the text because we're gonna manipulate around or throw out the animation what we're gonna do is manipulate the width of the container so every single time over time the timing function for course we're gonna increase the width so every single time we show up a character and that's how we're gonna apply the animation so for me to make sure this animation works perfectly fine we need to do white-space:nowrap which means we're not gonna wrap the word if the if it doesn't fit into the container so we're not gonna wrap the text into like two lines or three lines or someone else so forth so we're gonna do no wrap which means it's not gonna be rapid so it's gonna be completely hidden as well of as the overflow:hidden hopes doing best because it's gonna hide everything outside of the bounding box I'm gonna do a wide space and the last parameter we're gonna be adding later on is actually animation so before doing the animation we need to add the key frames of the animation so if you're not familiar with animation just gonna give you a quick brief introduction to it or how it works for CSS animations you've got keyframes so each keyframe is gonna represent like interval of how the innovation interacts like you've got from to or you got like percentages like from 0% to 15% apply this type of sound to my container or to the tank I'm currently on to this class specifically and for example from 50% to 100% apply another style and so on and so forth so house that's how works exactly the animation works behind the scenes on the CSS so you can clear your scene here I'm gonna first do a keyframes so we declare keyframes and I'm gonna just name this a typewriter so the typewriter text or the typewriter animation is gonna be very simple so I've kind of gone from so this is actually a keyframe the from is actually a keyframe and I'm gonna give it with so we start off with a zero width which means it's gonna be completely hidden then we're gonna start expanding it over time so I'm gonna do it too so which width we wanted to have of course as I said before as flourish in here as we added the full width it's gonna be 18 a.m. so that means it's a full width of the text it's gonna be filling it's 18 a.m. as I said before it depends on your text so if you have really long text or a really short tags make sure to give it the right width to fit specifically for that particular text and to make the animation exactly works as expect it to be so we're gonna have the width in here and I'm gonna add 18 a.m. as we expect it because that's the max width that it needs to finish with and that's the minimum width which means completely hidden that it needs to start with so that's simple as that that's what a keyframes means and that's how we can add our key frames the other thing we are gonna do is actually add another keyframes for the blinking cursor so we need to make the blinking cursor work do blink text cursor and for this we're also going to add the two things I'm going to do from and four from for the prompt text in here we're gonna probably do this actually border so I'm gonna do a border bright colors so every single time we change the color between the color that we've already added in here which is RGB 255 and we call it like 75% open transparency so we're gonna just toggle in between both of these states so the right color effort starts showing off then it goes to which means we're gonna just total between transparent complete experience and the white color so that's how we should basically work for the blinking cursor because the big cursor sometimes or between the intervals it shows then hinds it shows any hands so that's basically how the animation works I'm gonna just do it transparent and there you go so it first shows with its original color the white color a little bit transparent then if heís using it to experience color so it completely hides that's how we're gonna create the animation so both of these are the keyframes that we need for this the typewriter key frame and the cursor blinking keyframe so they both really important for that now the most important part is actually how we can apply the animation and what type of like twists or values we're gonna be choosing for that particular animation so if you don't know that so if you're not familiar with the animation and how it works so you're gonna give you a quick and brief introduction how we going to be creating it in here so I'm just gonna copy business from my other screen over there so I'm gonna do and there's actually gonna pack this for you guys comments so for the animation we're gonna have sort of like an animation name is gonna be a typewriter so I'm gonna start with this this animation name give you the name we second lis give it the animation duration so how much it's gonna take to finish hump the animation and you can give it whatever duration you would like to fast or you have it like very slow for the typing or anything like that so you can you know treat that out depending on your needs so four seconds for this we've got the animation timing function and this is a really important point is actually the timing function how it needs to be so for the steps function what it does is it's actually gonna create this the number given between parentheses it's gonna create about forty four intervals what I mean by intervals is actually every single time it does a step and so on and so forth so it's gonna do a 44 steps every single step is gonna represent if interval and to clearly understand more about that I'm gonna give you this you know and do a Mozilla developer and I'm just gonna give you the step timing function for the animation I'm gonna show you how it works so click playing is clearly seen here regards steps you got five till the end we can like remove then that's actually optional and we can start play so clears in here it plays depending on the steps provided we provided five steps so it does five steps each one is different from the other so you know it starts the first and ends it and it starts the other and ends it and so on and so forth and that's how exactly the animation or the steps animation basically works and that's perfectly fits for us because we're gonna create our typewriter animation function which means every single time we do like a typewriter or do an interval which means typing is an interval the other type in or the other character we're gonna type is actually another interval and so on and so forth so that's basically how it's gonna be working for the steps time and function so you can read more about this in the developers dot Muslim of the org and you can search for animation timing function on the CSS simple enough so that's actually for the steps the the other thing we need is actually the delay what anybody delay is how many is gonna take how much it's gonna take basically to like start off the animation we got the animation counts we only need to play the animation once and the direction is gonna be normal so we're not gonna take it backward or forward and the animation film mode is actually both which means we're just gonna have like both backwards and forwards fill it now so there's actually quite optional just to add it to make it much more smooth the problem with this is actually we can apply it to two animations at the same time so we have to do the animation or the shortened property which is the animation problem so we can do in here so you're gonna take all of this and shorten it into a single property with all the values into it and of course we're also gonna apply the blink text cursor alongside advanced to the animation so that's how we can apply to animations at the same time to a single class or single tank elements so what I'm gonna probably first start off is actually the animation aim as I said before so it's basically the same order in here we're gonna apply the same order on the shorten property so I'm gonna have time prior to the second thing I have the delay or information basically for seconds I'm gonna hang give it steps or 44 you can play off with the Samsung however you would like to I'm gonna give it one second so the delay give its place once for the counts and of course normal animation direction and for the film mode we're gonna just do both so you separate this with a comma now we gets back to line and then we're gonna just specify the blink cursor animation so I'm gonna give it the name plain text cursor I'm gonna give it the time interval or the duration for every single interval I'm gonna give it 400 milliseconds because it's gonna play fast gonna give it steps again and with stamps I'm gonna play 44 to make it you know do synchronize between both of the animations and I'm gonna give it an infinite which means it never ends so it's not gonna play once and stops for the direction is gonna be normal which means forward for sure and as simple as that so that's basically how we apply animation and for CSS style has been done now we need to jump into the HTML and of course we need to like per the container and it puts like typewriter tanks and we see the animation or the magic happens behind the scenes so I'm gonna just do main container and for sure I'm gonna do type library by text and I don't know I'm just gonna do I just put the same text that we've put before so I'm gonna do CSS text or [Applause] CSS text animation and you can include that and they miss Symes typewriter there you go and I had just mistake we typed normal so just type it correctly and there you go we got the animation working perfectly fine for the typewriter and of course the CSS animation that we have provided as clearly seen here it looks pretty pretty dope pretty awesome you can increase the font size in here just to make you look a little bit bigger around thirty eight pixels K through eight pixels you should look much better and much clearer so curious in here there you go guys you got your you know CSS typewriter animation out of the box and everything should be there you're gonna find the sandbox right down in the description if you would like to check your house and help you guys you've enjoyed the videos choice and then guys for watching us set it before and yeah put on like button push it basically and for sure don't forget to subscribe share the video tours because I find a lot of people not subscribing watching my videos so that's quite you know embarrassing and no not quietly as I anticipated to be so please guys push not like a button and of course subscribe make sure to subscribe because you know find tons of other video tutorials on my channel news and stuff and for sure of activate this notification bill that's gonna mean the word for me so I think that's where I'm standing get prep and hopefully you guys have enjoyed so see you all hopefully in the next video stories