CSS Text Typing Animation | Multiple Text Typing Animation

Pure CSS Text Typing Animation | Multiple Text Typing Animation using HTML & CSS
In this video, I have shown you how to create a pure css text typing animation. In this animation, there is a total of four texts and each text slide and appear with a typing animation.
Improved version of this Text Typing Effect
Watch: • Create Text Typing Eff...
If you want to erase back the typed text then remove the last @keyframes codes and add this
@keyframes typing {
40%, 60%{
left: calc(100% + 30px);
}
100%{
left: 0;
}
}
And also you have to change the time duration of the animations
Line. 36 - Replace this line with this:
animation: slide 12s steps(4) infinite;
Line. 56 - Replace this line with this:
animation: typing 3s steps(10) infinite;
Responsive Portfolio Website with Typing Animation
➤ • Complete Responsive Pe...
If you don't know how to do then simply download the code files from here - codingnepalweb.com/text-typin...
Second Channel - bit.ly/3aHNkru
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Ikson - Last Summer [Official]
• #37 Last Summer (Offic...
Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)
➤ Watch: • Jimmy Hardwind - Want ...

[@CodingNepal]

Improved version of this Text Typing Effect
Watch: ruclips.net/video/DLs1X9T1GcY/видео.html

[@Anas-xi1mx]

Great video, thank you 💛 What is the function of steps in animation?

[@GamingTSH]

Programming By TSH --- This channel is so good too

[@kinglucky5122]

done sir.... great video

[@mstfsgdc]

Best front-end tutorials ever

[@SuperVOVANCHO]

That's a very good tutorial, fast and clean explanation

[@mohd.irfanlohar4544]

Bro you nailed it without js I cannot imagine 😅

[@vujvvuc7673]

Omg!! This what i am searching for past 2 days. Thanks a lot 👍👍

[@mimohaghimire3905]

Proud that its from Nepal. Thanks for helping man, it made my day :D

[@Maria-sq4jl]

It's so easy to follow u and u r not speaking! Definitely earned a new subscriber :D

[@nico.8046]

I can't believe it, just what I needed !! hahaha thanks for sharing

[@CodingNepal]

Glad I could help!

[@mh_kohansal]

i can't believe it, that's awesome. ty bro

[@wancharo9538]

This is exactly what I am looking for!! Thank you !

[@CodingNepal]

You're most welcome!

[@jfine24]

Brilliant! I enjoyed this very much! Thank you! Is there a way to backspace and then type again as if fixing a typo?

[@barakakinywasoftwaredevelo5941]

Amazing and easy. Congratulations!

[@umairabdullah7777]

Thank's lot I just wanted it

[@adalovelac24]

i love your content
it's short and useful

[@iamnikhil123]

Simply Awesome !

[@w0000llllvvvve]

Amazing!! thank you for making this video. you are genius.

[@marutidesai1788]

the background sound was amazing

[@mattbegnoche2081]

You are awesome! Thanks for this video!!!!

[@juanmacias5922]

Thank you so much! It's such a cool effect!

[@CodingNepal]

I'm glad you like it

[@PatrikRasch]

Thank you for the idea

[@sarthak_jadhav]

Loved it ❤

[@vasudevkulkarni4160]

Thank you so much!
Keep growing

[@GamingTSH]

Programming By TSH --- This channel is so good too

[@aryankhandelwal15]

What i needed !

[@ranvirraj1855]

That's what i was thinking for and you made it.Thanks

[@CodingNepal]

Hope you like it!

[@arcangel1384]

Pretty much what i was thinking nice logic✨😌

[@timothykirathe4585]

Very helpful. Thank you

[@nonopanzu1193]

Beautifull
Beautifull
Bravo!

[@jatinkumar4410]

Amazing... Just awesome! Thanks for the tutorial...

[@CodingNepal]

My pleasure!

[@Dr.UdaraSenarathne]

Thank you very much!

[@abdullahsoomro6238]

You are amazing broo

[@bryanmayodi613]

bro you are the goat

[@awabmahdi7002]

Arigato brother❤

[@asqar_arslonov]

What!!!😮😮Thank you. Thank you. I can't understand how developers create animation types. Thank you

[@CodingNepal]

It's all depends on learning.

[@UdayKumar-iw7uo]

thank you so much

[@aroosafayaz2204]

your videos awesom also u share source code well & good thanks for this kindness

[@vigneshwarvenugopal922]

Thanks for your help codingnepal....i done by project with your help...thank you so much..

[@minzcode]

Wow! It's an idea I didn't think of.

[@CodingNepal]

Glad you like it!

[@mycodingjourney.7868]

Great bro

[@ravshansavurbaev]

amazing coding

[@thanhquachable]

This is amazing man. You earned a subscriber 😄

[@CodingNepal]

Awesome, thank you!

[@joannecalasanz4022]

Love this! I just need it to be mobile responsive now. Any tips? I'm new to html and css.

[@lautarorodriguez5912]

Thanks bro, very nice!

[@CodingNepal]

Glad you like it!

[@roxeranimation1372]

that's so clever

[@ayushdubey966]

great

[@atharva_sabde]

Thank you sooo much dude!!!

[@CodingNepal]

Happy to help

[@deepeshdhakal7476]

Best guys in the world

[@ShubhUSinha]

I want animate it like it does backspace not at once but by letter by letter. How can I do that?

[@jawidhmuhammadh2592]

Brother your videos are awsome...you are covering many topics even in a single video..One kind request if you could add your voice with explaination then it would be very good for beginners like us bro....thanks for teaching us...Need more javascript projects with your voice explaination...Thank u so much bro

[@CodingNepal]

I will try my best...Stay tuned with us :)

[@romuloalves9349]

Ótimo vídeo parabéns 👏

[@parallellinesmeetatinfinity]

Thanks

[@naveenkr.904]

This is the best web development Channel ever...❤

[@CodingNepal]

Glad you think so!

[@VeerpalKaur-uv9dv]

Hey, please explain why did you give margin: 0 -35px 0 35px at 03:36

[@TechWithAashubro]

Op @keyframe trick bruh , Keep progressing

[@CodingNepal]

Thank you so much 😀

[@sushil12345ful]

Hi, do you know how I can get the texts : youtuber, developer, freelancer in the next line?

[@Deus-lo-Vuilt]

nice :D

[@javeriafarooq108]

Please provide the specific placement and quantity of the duration for each animation. My text is lengthy, and if I increase the animation's duration, the text becomes distorted.

[@ottokuosmanen4787]

Awesome!

[@CodingNepal]

Thanks!

[@dramabuzz4203]

Great tutorial..! Love from Bangladesh😍

[@CodingNepal]

Thank you so much 😀

[@rajubarve1130]

Master mind

[@zaibuilds]

Can we make this responsive by using a media query?

[@user-gd1iz9bh5s]

I dont know why but the animation on mine is broken like it's cut where you can see the half of the other word and anothee half of a dif word and the line is only starting at the end

[@ahmedatcha6326]

You the best bro 🇹🇬♥️

[@CodingNepal]

Thanks bro :)

[@pedrocypriano4317]

Nice bro!

[@CodingNepal]

Thanks bro 🔥

[@takitachibana7717]

thanks

[@ahmadsader5605]

Why when i change the steps to any number i want the thing starts bugging? i added an li and increased the steps but a weird animation is now happening
plz help!

[@CreativeTutorialsWeb]

Thank you so much Sir God bless you

[@CodingNepal]

Most welcome

[@CreativeTutorialsWeb]

@@CodingNepal 🤗

[@FRONTRUS]

Easier to use the typeit plugin) Good job 👍

[@CodingNepal]

Yeah thanks and I've also made a video on it - ruclips.net/video/tcskp-ncN0I/видео.html

[@bebinjohn5522]

@@CodingNepal 22

[@iTzReckLas]

Great bro :)

[@CodingNepal]

Thanks bro😁

[@iTzReckLas]

@@CodingNepal 😅

[@FreshDJesus]

this is very nice. But when i try to edit the font-size is the whole code broke.

[@hxpelessrxmantic1741]

hey for some reason it repeats words two times for me even after using exact code, any way you can help

[@zohramanzoor3473]

Thank you

[@CodingNepal]

You're welcome

[@yeminaung7008]

How to change animation seconds for only 2 li spam
I can’t figure it out

[@AmitDutta-dn5my]

Sir, I need only three-span (1. Web Developer, 2. Graphic Designer, 3. Digital Marketer). how to get this design please help me because my texts are overlapping with each other

[@robi199093]

Awesome

[@CodingNepal]

Thanks 😁

[@nanasuarezperez]

Hi, thanks for the video.
I modified the font-size and the animation changed. How can adapt the animation with the size of the text? Thanks :)

[@sajaddadgar8762]

It's proportion and for font-size = X, you mush change the following:
.wrapper .dynamic-txts{
height: 1.5 * X;
line-height: 1.5 * X;
}
.dynamic-txt li{
font-size: X;
}
@keyframes slide {
100%{
top: 6 * X;
}
}

[@binayrajbanshi7849]

@@sajaddadgar8762 damn mate it worked

[@kobebryantullao2905]

I'm a new to htmls css, how can I make this animation responsive?

[@fraggerplayzzz2992]

Bro i want to remove the cursor after animation is done i can i do that

[@ankushsonone8433]

Brother I try your code but this is not working for me please help. It’s not showing the output what exactly you showing in the video I follow your each and evercode but still

[@user-sk9kl9bn1r]

Great :)

[@CodingNepal]

Thanks!

[@aogunnaike]

Lovely

[@CodingNepal]

Thanks Man!

[@lashapanjavidze4730]

what do you think, which is better? to use javascript for animation like this or HTML-CSS?

[@CodingNepal]

Definitely javascript because with javascript we can do complex and more attractive animation easily. You can compare this video typing animation with this video - ruclips.net/video/tcskp-ncN0I/видео.html

[@coopinloop3037]

Bro pls reply, how can I do this having a background image?

[@jake19077]

Please make a video on last and middle word rotation. By the way, this video is also cool.

[@CodingNepal]

Ok

[@talabsa4108]

Great❤️

[@GamingTSH]

Programming By TSH --- This channel is so good too

[@An-yh2bl]

Awesome 😊😊

[@CodingNepal]

Thanks for the visit

[@gamekills8865]

Is it gonna work for new line?

[@pigeonmaruf5231]

bro big fan love from bangladesh dhaka

[@CodingNepal]

Thank you so much

[@DevenderSingh-yo9hu]

It would more beneficial if you explain some key components.

[@user-kg6fz5tz2b]

Спасибо!!!

[@CodingNepal]

You're so welcome :)

[@pankajdahal8787]

Ekdamai ramro sir.

[@CodingNepal]

Glad you like it :)

[@harshjain9004]

How to add 5th line in animation ??

[@NaveenKumar-kv3ul]

Excellent

[@CodingNepal]

Thank you so much 😀

[@GamingTSH]

Programming By TSH --- This channel is so good too

[@darshanbajgain]

Can we do by javascript? How can we do this by using Javascript? Event listener?

[@bhargavvvv]

How to make this effect responsive for the websites

[@samanyuv3789]

Hey!, Great video but I have kept the background as linear gradient to right how to merge the color of the background in .dynamic-txts li span::after{ with the color of my body background.... Kindly reply ASAP

[@shapind]

Use background as transparent.

[@GamingTSH]

Programming By TSH --- This channel is so good too

[@romitrajput1950]

Is it responsive? If not can we make it responsive? Thanks :)

[@Mkumarei]

😁 dhanyewad...

[@CodingNepal]

Welcome :)

[@harshjain8345]

Great video buddy.. Amazing!! Btw.. What's your pc specification!?... Kindly mention all in detail... Thanks!!

[@CodingNepal]

CPU - Ryzen 3 3300
GPU - GTX 1650
Motherboard - MSI B450M A Pro
Ram - 8 * 2 = 16GB
SSD - 256 GB
HDD - 500GB
PSU - 550 watt

[@user-rf1ij2jf9l]

can't make it responsive , thank you

[@daniyla5109]

GG man

[@CodingNepal]

Thanks man 😁

[@rjs_world_shades]

this video is super helpful .i tried several times,and still missing something.can i get the full code for this?

[@CodingNepal]

Source codes link is the description!