CSS Text Typing Animation | Multiple Text Typing Animation
Vložit
- čas přidán 23. 02. 2021
- 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.
🗂️ Get Source Code of this CSS Text Typing Effect
➤ buymeacoffee.com/codingnepal/...
🌐 Visit CodingNepal for helpful coding projects
➤ www.codingnepalweb.com
⭐ Hire me on Fiverr
➤ www.fiverr.com/prakashahi
📷 Follow me on Instagram
➤ / coding.np
🤝 Support my work with a coffee
➤ buymeacoffee.com/codingnepal
Music Credit:
Ikson - Last Summer [Official]
• #37 Last Summer (Offic...
Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)
➤ Watch: • Jimmy Hardwind - Want ...
Improved version of this Text Typing Effect
Watch: czcams.com/video/DLs1X9T1GcY/video.html
Great video, thank you 💛 What is the function of steps in animation?
Programming By TSH --- This channel is so good too
done sir.... great video
Best front-end tutorials ever
That's a very good tutorial, fast and clean explanation
Omg!! This what i am searching for past 2 days. Thanks a lot 👍👍
I can't believe it, just what I needed !! hahaha thanks for sharing
Glad I could help!
It's so easy to follow u and u r not speaking! Definitely earned a new subscriber :D
Proud that its from Nepal. Thanks for helping man, it made my day :D
Bro you nailed it without js I cannot imagine 😅
This is exactly what I am looking for!! Thank you !
You're most welcome!
i can't believe it, that's awesome. ty bro
Amazing and easy. Congratulations!
Simply Awesome !
Amazing!! thank you for making this video. you are genius.
i love your content
it's short and useful
Brilliant! I enjoyed this very much! Thank you! Is there a way to backspace and then type again as if fixing a typo?
Loved it ❤
What i needed !
Thank you so much! It's such a cool effect!
I'm glad you like it
You are awesome! Thanks for this video!!!!
Beautifull
Beautifull
Bravo!
Thank you for the idea
Amazing... Just awesome! Thanks for the tutorial...
My pleasure!
Thank you so much!
Keep growing
Programming By TSH --- This channel is so good too
the background sound was amazing
That's what i was thinking for and you made it.Thanks
Hope you like it!
bro you are the goat
Very helpful. Thank you
Thank you very much!
What!!!😮😮Thank you. Thank you. I can't understand how developers create animation types. Thank you
It's all depends on learning.
Wow! It's an idea I didn't think of.
Glad you like it!
Great bro
Thank's lot I just wanted it
This is amazing man. You earned a subscriber 😄
Awesome, thank you!
thank you so much
your videos awesom also u share source code well & good thanks for this kindness
Arigato brother❤
Pretty much what i was thinking nice logic✨😌
You are amazing broo
amazing coding
Awesome!
Thanks!
that's so clever
Thanks bro, very nice!
Glad you like it!
Thank you sooo much dude!!!
Happy to help
nice :D
This is the best web development Channel ever...❤
Glad you think so!
great
Best guys in the world
Op @keyframe trick bruh , Keep progressing
Thank you so much 😀
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
I will try my best...Stay tuned with us :)
Nice bro!
Thanks bro 🔥
You the best bro 🇹🇬♥️
Thanks bro :)
Thanks for your help codingnepal....i done by project with your help...thank you so much..
Great tutorial..! Love from Bangladesh😍
Thank you so much 😀
Hey, please explain why did you give margin: 0 -35px 0 35px at 03:36
I want animate it like it does backspace not at once but by letter by letter. How can I do that?
Love this! I just need it to be mobile responsive now. Any tips? I'm new to html and css.
Hi, do you know how I can get the texts : youtuber, developer, freelancer in the next line?
Great :)
Thanks!
Master mind
Awesome
Thanks 😁
Ótimo vídeo parabéns 👏
Thanks
Lovely
Thanks Man!
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!
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
Great❤️
Programming By TSH --- This channel is so good too
Ekdamai ramro sir.
Glad you like it :)
Awesome 😊😊
Thanks for the visit
Thank you so much Sir God bless you
Most welcome
@@CodingNepal 🤗
Great bro :)
Thanks bro😁
@@CodingNepal 😅
thanks
Thank you
You're welcome
what do you think, which is better? to use javascript for animation like this or HTML-CSS?
Definitely javascript because with javascript we can do complex and more attractive animation easily. You can compare this video typing animation with this video - czcams.com/video/tcskp-ncN0I/video.html
GG man
Thanks man 😁
Спасибо!!!
You're so welcome :)
How to change animation seconds for only 2 li spam
I can’t figure it out
Lit💥
Programming By TSH --- This channel is so good too
hey for some reason it repeats words two times for me even after using exact code, any way you can help
Easier to use the typeit plugin) Good job 👍
Yeah thanks and I've also made a video on it - czcams.com/video/tcskp-ncN0I/video.html
@@CodingNepal 22
bro big fan love from bangladesh dhaka
Thank you so much
Bro i want to remove the cursor after animation is done i can i do that
Excellent
Thank you so much 😀
Programming By TSH --- This channel is so good too
Great video buddy.. Amazing!! Btw.. What's your pc specification!?... Kindly mention all in detail... Thanks!!
CPU - Ryzen 3 3300
GPU - GTX 1650
Motherboard - MSI B450M A Pro
Ram - 8 * 2 = 16GB
SSD - 256 GB
HDD - 500GB
PSU - 550 watt
where did u code? its cool that u can code and see the result at the same time
How to add 5th line in animation ??
I'm a new to htmls css, how can I make this animation responsive?
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
Please make a video on last and middle word rotation. By the way, this video is also cool.
Ok
Bro pls reply, how can I do this having a background image?
What extension do you use to preview the code? I am a new follower!
Atom HTML Preview
😁 dhanyewad...
Welcome :)
if i put 36px for font size it will be messy. what should i do to look nice
It's proportion and for 36px font-size, you mush change the following:
.wrapper .dynamic-txts{
height: 54px;
line-height: 54px;
}
.dynamic-txt li{
font-size: 36px;
}
@keyframes slide {
100%{
top: -216px;
}
}
Can we make this responsive by using a media query?
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
How to make this effect responsive for the websites
But what if we want to add the text infront of an image, in the 41st line, what should we change?
i have the same question
best
Thanks 😁
What if I want to make the animation stop after
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.
How can i make it with vanilla javascript?
how do i that in a background image?