CSS Text Typing Animation | HTML & CSS

preview_player
Показать описание
In today's tutorial you’ll learn how to create a Simple Text Typing Animation using only HTML & CSS or Typewriter Text Animation.
You may have seen this type of text typing animation on many portfolio sites or other sites.

Basically, this animation is created using JavaScript or jQuery library, but today I’ll show you how you can create this text typing animation using only HTML & CSS.
______________________________________________________________
👉 Source Code Available Here:
______________________________________________________________
💜Support our channel from as little as $1-3 by becoming a Patreon because by doing that, you will help our Channel and also you will have access to 🖥️ Source Code of our videos!
______________________________________________________________
⏱️Chapters:
00:00 - Intro
00:48 - Create boilerplate
01:35 - Markup
03:03 - CSS
_____________________________________________________________
🧠Concepts covered in this project:
- CSS: flexbox
- CSS: animation
- CSS: @keyframes
______________________________________________________________
📚Resources
______________________________________________________________

🏆Recommended Videos🏆

🎬Login & Registration Form Using HTML & CSS & JS

🎬Neumorphism Login Form | HTML & CSS

🎬Animated Sidebar Menu with HTML & CSS

🎬Build a Step Progress Bar | JavaScript✨

🎬How To Make Login & Registration Form | HTML CSS & Vanilla JavaScript✨

______________________________________________________________
🛴 Follow me on:
______________________________________________________________
🎵Background Music for Videos:
______________________________________________________________
👨‍💼 business inquiries
Рекомендации по теме
Комментарии
Автор

If you find this video helpful, give it a like as this would help it reach even more people! Also, subscribe if you haven't ! Thank you! 🙏
👉 Source Code Available Here:

DevMadeEasy
Автор

wow, very cool. I wasn't sure how you could achieve that effect without JS.

kaynesheenan
Автор

This only works when your background is a uniform color. It doesn't work on a background image.

dtheminiature
Автор

Is there a way to make the marker (border) stop at the end of each word? Right now it's stopping at the last letter of the longest word in the list.

yodafootball
Автор

Wow 😲 i understand only one attempt and i make it
By
Little help
Thanks 👍

satyamjatt
Автор

loved it absolutely, simple and effective!

anuragkasudhan
Автор

Everything is great but I wished that cursor would blink

MuhammadAsad-jm
Автор

how do i hide the text if i have a background img???
pls help
ps. i dont want it to get rid of it

anonymousperson
Автор

This is awesome guys !! I got a perfect solution from here.
Have a nice jurney, Thank you so much...

mdlitonmiah
Автор

You know you could have different colours for each word. Change the typing animation to be the same length as the slide animation. Then split the typing animation into 4 parts (for the 4 words) 0-25, 25-50, 50-75, 75-100. Change the text colour in the animation.

SteveJohnSteele
Автор

l loved it.انه رائع لك كل التحية from syria

rafiatala
Автор

wow, amazing, I can't believe you will do it without Js.

randabadawy
Автор

if one of the list items is short and another is very long then the animation continues for a long time after the short word how do i fix this

kaziikram
Автор

Really helpful super clear and easy ty!

tachisnofansub
Автор

how did you have 2 things in 1 line but 1 in the upper line and one in the under line? in the first of the video

EbayChatFailsMain
Автор

Hello ! Great video and very well explained!
In fact I integrated a dark mode on my site. As a result, the background works well on the white background (the text is removed) but not on my gray background. Do you have any recommendations? Thanks !

Adziwo
Автор

Great video ☺️
Please keep going 🥳
Have 2 questions
1- in calc(100% +30px )
Why 30 px ?
2- why using -360 ?

hagergamal
Автор

My background is an image so what CSS property should I change in order to have the erase effect?

kevinronald
Автор

How apply this work to WordPress home page

Yourgopal
Автор

thats in a color background, how i do in a background image?

ivxqnht