Typing Text Animation Using Only HTML & CSS

In this video, You will learn how to create an awesome multiple Text Typing Animation Using Only HTML & CSS
-------------------------------------
◼️ Source code: www.darkcode.info/2023/04/typ...
-------------------------------------
Social Media Pages:
◼️ Facebook: / darkcode0
◼️ Instagram: / darkcodeonl. .
-------------------------------------
Support Me:
◼️ Paypal: paypal.me/YBenlachheb
◼️ Patreon: / darkcode
-------------------------------------
◼️ Code Editor: VS Code
◼️ Packages installed: Emmet, Live Server
◼️ Color Theme Used: One Dark Pro
-------------------------------------
Music:
Track: Jéja - Bad Habit (ft. Zaug) - Phonk Version [NCS Release]
Music provided by NoCopyrightSounds.
Watch: NCS.lnk.to/BadHabit-PhonkAT/yo...
Free Download / Stream: ncs.io/BadHabit-Phonk

[@carlospaz3277]

Dude that's so cool

[@IjazMasih-cv2ed]

Thank you sooooooo much

[@user75445]

🔥🔥

[@carlosandresramirez9808]

Thank you for the video DarkCode. Greetings❤👍👍👍👋👋👋

[@DarkCodeOnline]

you're welcome

[@user-dn6ng2yk4s]

Really useful 👍

[@arturmoreira9716]

Amazing brother, thanks

[@DarkCodeOnline]

Welcome ❤️

[@dbldragon835]

really nice, can you make it interactive ,like whatever user types ,it shows the same way,like i am spiderman,i am ironman,when a user types,spiderman or ironman

[@jardeljeremiasjasse]

cool

[@wirat2011]

Thanks

[@DarkCodeOnline]

you're welcome

[@shoaibahmed5293]

Welcome back! 🎉

[@DarkCodeOnline]

Enjoy

[@marshallxzn3802]

Is it my problem as I did using same code and same platform, why mine cant work this well?

[@shadowff001]

same

[@user-dr6vi6ms2t]

It's not work properly for me

[@SunitaSharma0100]

code is not working🤔

[@okorochimezirimchibuzo6040]

The code didn't work for me

[@user-nr3lm1ug9j]

😂😂😂 u think any one of us got projects like this worked

[@dopffishere]

ban tinh roi a oi

[@prosenjeetsarker]

This is complex .

[@mohamedahmedsaad1793]

i agree

[@SunitaSharma0100]

Is it my problem as I did using same code and same platform, why mine cant work this well?

[@allanpires4362]

for me worked:




Text typing animation




I'm a


body{
margin: 0;
padding: 0;
background-color: #2f3542;
color: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
}
.animated-text{
font-size: 20pt;
font-weight: 600;
min-width: 280px;
}
.animated-text span{
position: relative;
}
.animated-text span::before{
content: "CZcamsr";
color: #ff7f50;
animation: words 20s infinite;
}
.animated-text span::after{
content: "";
position: absolute;
width: calc(100% + 8px);
height: 100%;
background-color: #2f3542;
border-left: 2px solid #ff7f50;
right: -8px;
animation: cursor .8s infinite, typing 20s steps(14) infinite;
}
@keyframes cursor{
to{
border-left: 2px solid transparent;
}
}
@keyframes words{
0%, 20%{
content: "CZcamsr";
}
21%, 40%{
content: "Blogger";
}
41%, 60%{
content: "Developer";
}
61%, 80%{
content: "Designer";
}
81%, 100%{
content: "Gamer";
}
}
@keyframes typing{
10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95%{
width: 0;
}
5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85%{
width: calc(100% + 8px);
}
}