DEV Community

Text Animation in CSS

Shubham Tiwari on August 24, 2022

Hello Guys today i am going to show you some CSS animation on text.All the animation i am showing have similar code and after understanding those a...

Read full post

Harry Bawsac • Aug 29 '22

Bit of a misleading title, if you ask me. This is not animating text, this is animating a list.

Some tips for writing articles:

Check your grammer. It’s full of mistakes. You’re not chatting with some of your friends, you’re actually publishing an article for people to read.
Use back-ticks to highlight code stuff throughout the written part of your article.

Shubham Tiwari • Aug 29 '22

Well The overall animation part can be seen on text and i used list elements to create a text and like if a person create a post about "how to create a website" then what should be the title is "How to write code in Body element of html"?
About the Grammer part , well my native language is not English and i had learnt English that's why i don't have expertise in English Grammer but i try my best to write my posts in a simple way and understandable.
Cheers ✌✌

Harry Bawsac • Aug 30 '22

The thing is, you should’ve never used an unordered list to display a string of text to begin with. The point I’m making is about HTML semantics. Work with semantics, not against it.

Shubham Tiwari • Aug 30 '22

Yeah span element would be good instead of list elements

JoelBonetR 🥇 • Aug 24 '22

Nice post! Loving all those animations😁

I'm always tempted to add animation-iteration-count: infinite; and see the weird result 🙈 It gets funny before it gets annoying, did you try? 😂

Shubham Tiwari • Aug 24 '22

Yeah animation iteration count 😂😂
But I think these text animations are best for Landing page Texts which happens once only on page reload
Actually I was practicing css pseudo selectors and also found this awesome var() and calc() function which I merged with pseudo selectors and created these animations