DEV Community

Cover image for Text Animation in CSS
Shubham Tiwari
Shubham Tiwari

Posted on • Updated on

Text Animation in CSS

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 animations , you can then easily create your own animation with it.

Let's get started...

Before dive into the topic , first understand this thing.

What is var in CSS?

The var() function is used to insert the value of a CSS variable.
Means if you provide an element a value like "--i:1", it means that element has a variable called "i" with a value of "1".
We can access this variable using var() function.

  • I am going to explain one animation because the other animations are similar and you will easily understand those.

Animation - 1

In this animation , we will create a bubbly type text animation.

HTML

<ul class="container">
  <li style="--i:1">A</li>
  <li style="--i:1.3">N</li>
  <li style="--i:1.6">I</li>
  <li style="--i:1.9">M</li>
  <li style="--i:2.2">A</li>
  <li style="--i:2.5">T</li>
  <li style="--i:2.8">I</li>
  <li style="--i:3.1">O</li>
  <li style="--i:3.4">N</li>
</ul>
Enter fullscreen mode Exit fullscreen mode
  • We have created a ul element and inside it we have created li elements for each alphabet and provided each li element a variable called "i" with different values.

css

.container {
  display: flex;
  justify-content: center;
  font-size: 3rem;
  list-style-type: none;
  display: flex;
  gap: 20px;
}

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: bubbly;
  animation-duration: calc(var(--i) * 1s);
   animation-fill-mode:forwards;
  animation-timing-function:ease-in-out
}

/* keyframes */
@keyframes bubbly {
  0% {
    opacity: 0;
    /* transform: translateY(-100px); */
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    /* transform: translateY(0); */
    transform: scale(1);
  }
}
Enter fullscreen mode Exit fullscreen mode
  • First we have styled the container element with some properties.
  • Then we have provided the animation name to li element, this animation will be applied to all the li elements
  • Here comes the best part , we have used the calc() function, The calc() function performs a calculation to be used as the property value.
  • inside calc(), we have used our variable "i" using var() function.It will use the value of variable "i" and set the animation duration with that value so , the animation duration of all the li elements will be different.
  • Then inside the keyframes , we have defined our animation.

Some other animations with their output -

Animation 1 -

Animation 2 -

Animation 3 -

Animation 4 -

Animation 5 -

Animation 6 -

Animation 7 -

Animation 8 -

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Oldest comments (22)

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

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇

Nice, so it will be a nice boost to your learning process :)

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

Yeah it will be

Collapse
 
seek4samurai profile image
Gourav Singh Rawat • 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 Singh Rawat

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
 
eludadev profile image
Eluda

Looking sick! Nice animations! 🔥

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Thank you 🍻

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
 
jay50468399jay profile image
Jay Jay

It is very good. I love it very much

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

thank you