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