Shrink Text Animation using HTML & CSS | CSS Animation Examples

 

Hello Friends, In this article, we will create another simple snippet based on Shrink Text Animation using HTML & CSS. I have created a div named content where I placed a couple of span tags and put some text in there. I took the content div to the center of the viewport by using absolute position value. Then I styled the span elements with some necessary CSS properties so that it looks aesthetic. I divided the initials of each syllable of the word, and then I applied CSS animation for hover. Whenever we hover over the name, only the initials will show up, and the name will be Shrink, but when we release the hover, the word will return to its initial state. I set a transition value so that the transition occurs smoothly. I have shared a lot of CSS animation based snippets before in my blog. Make sure to check those articles as well. Without further explanation, I am providing you the code to have a look by yourself. 

I hope you liked this simple snippet. If so, please follow our social media profile to stay connected with this blog. Thank you for stopping by.