DEV Community

Cover image for Text Animation in CSS

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...
Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

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? 😂

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

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

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

Nice to hear about your learning progress 😁

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari •

Yeah i also got my first job as a web developer 😂😂

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇 •

Glad to hear that! 😀 Which stack you'll work with?

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari •

Currently HTML , CSS and JavaScript training for 3 months

Collapse
 
harrybawsac profile image
Harry Bawsac •

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.
Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

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 ✌✌

Collapse
 
harrybawsac profile image
Harry Bawsac •

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.

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari •

Yeah span element would be good instead of list elements

Collapse
 
seek4samurai profile image
Gourav • • Edited

8th animation looks sick!

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

Well I didn't get what you are trying to say

Collapse
 
seek4samurai profile image
Gourav •

I mean the last animation looks amazing :)

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari •

Thank you 😂😂

Collapse
 
thomastamour profile image
𝐓𝐡𝐨𝐦𝐚𝐬 𝐒𝐭-𝐀𝐦𝐨𝐮𝐫 •

Gg. Nicely exemplified article.
Image description
I've catched a typo here 👀

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

I will fix it thank you for mentioning this typo error 😉

Collapse
 
youneslaaroussi profile image
Younes Laaroussi •

Looking sick! Nice animations! 🔥

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

Thank you 🍻

Collapse
 
jay50468399jay profile image
Jay Jay •

It is very good. I love it very much

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

thank you