| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
December 12, 2021 2:55 PM |
9 |
10 |
2 |
💚Day 2️⃣6️⃣ / 1️⃣ 0️⃣0️⃣ days of Master in CSS Design series!
💥Today we going to build text typing animation using HTML CSS.
❓What's the main logic behind it with the codepen link?
#100DaysOfCode
#webdevelopment
#CodeNewbie
Let me explain👇🧵 pic.twitter.com/WbalV6Ridi
🟢 So first we will design the text.
🔴 During this design, there are three most important things in it.
1️⃣ We have to use this property to create the cursor.
2️⃣ Now we want the text to animate in a single line, so for that, we have to use this property.
3️⃣ Then we want that the text should not flow on the right side of the cursor, so for that, we have to use this property.
🟢 Now we want the text to animate in multiple steps.
So for this, we have to use the steps() function.
🟢 Now we want to make the cursor blink.
0 - 40 = transparent 40 - 100 = red
🟢 Now we have to move the text letterwise.
👀 ch = character
start = 0 character final = display all character.
codepen: