Text Animation in CSS
Tags: html, css, webdev, tutorial
Published: 2022-08-24 11:53:00

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 
```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
```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 -
{% codepen https://codepen.io/shubhamtiwari909/pen/ZExZxby %}

### Animation 2 -
{% codepen https://codepen.io/shubhamtiwari909/pen/bGvJvEV %}

### Animation 3 -
{% codepen https://codepen.io/shubhamtiwari909/pen/bGvJveV %}

### Animation 4 -
{% codepen https://codepen.io/shubhamtiwari909/pen/gOeyegY %}

### Animation 5 -
{% codepen https://codepen.io/shubhamtiwari909/pen/ZExZxKX %}

### Animation 6 -
{% codepen https://codepen.io/shubhamtiwari909/pen/eYMoMEy %}

### Animation 7 -
{% codepen https://codepen.io/shubhamtiwari909/pen/mdxgxqb %}

### Animation 8 -
{% codepen https://codepen.io/shubhamtiwari909/pen/oNqOqqO %}

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