Shubham Tiwari

Posted on Aug 24, 2022 Edited on Sep 5, 2022

Text Animation in CSS

#html #css #webdev #tutorial

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>

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);
  }
}

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

Top comments (22)

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

JoelBonetR 🥇 • Aug 24 '22

Nice to hear about your learning progress 😁

Shubham Tiwari • Aug 24 '22

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

JoelBonetR 🥇 • Aug 24 '22

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

Shubham Tiwari • Aug 24 '22

Currently HTML , CSS and JavaScript training for 3 months

JoelBonetR 🥇 • Aug 24 '22

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

Shubham Tiwari • Aug 24 '22

Yeah it will be

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.