DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Text Animation in CSS
Mysterio
Mysterio

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

Top comments (22)

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
Mysterio Author

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
Mysterio Author

Yeah span element would be good instead of list elements

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
Mysterio Author

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
Mysterio Author

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
Mysterio Author

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
Mysterio Author

Yeah it will be

Collapse
 
seek4samurai profile image
Gourav Singh Rawat • Edited on

8th animation looks sick!

Collapse
 
shubhamtiwari909 profile image
Mysterio Author

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
Mysterio Author

Thank you ๐Ÿ˜‚๐Ÿ˜‚

Collapse
 
eludadev profile image
Eluda

Looking sick! Nice animations! ๐Ÿ”ฅ

Collapse
 
shubhamtiwari909 profile image
Mysterio Author

Thank you ๐Ÿป

Collapse
 
thomastamour profile image

Gg. Nicely exemplified article.
Image description
I've catched a typo here ๐Ÿ‘€

Collapse
 
shubhamtiwari909 profile image
Mysterio Author

I will fix it thank you for mentioning this typo error ๐Ÿ˜‰

Collapse
 
jay50468399jay profile image
Jay Jay

It is very good. I love it very much

Collapse
 
shubhamtiwari909 profile image
Mysterio Author

thank you

๐ŸŒš Browsing with dark mode makes you a better developer.

It's a scientific fact.