Bouncing Text Animation Using Only CSS

Hello friends, today I am sharing a beautiful Animated Text Using Css Only effect where I just played little bit pseudo element in css using css3 advance properties to produce this Text Animation.

 

Here in beautiful text animation I am counting each letter used here to apply a specific animation time to each letter so that we can arrange their animation like they are randomly bouncing with animation property Bounce as showing in code animation: bounce .3s ease infinite alternate;

Pseudo Element used to provide each letter different animation time as you can see in code given below:

h1 span:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s; }

h1 span:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s; }

h1 span:nth-child(4) { -webkit-animation-delay: .3s; animation-delay: .3s; }

h1 span:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s; }

h1 span:nth-child(6) { -webkit-animation-delay: .5s; animation-delay: .5s; }

h1 span:nth-child(7) { -webkit-animation-delay: .6s; animation-delay: .6s; }

h1 span:nth-child(8) { -webkit-animation-delay: .7s; animation-delay: .7s; }

h1 span:nth-child(9) { -webkit-animation-delay: .8s; animation-delay: .8s; }

h1 span:nth-child(10) { -webkit-animation-delay: .9s; animation-delay: .9s; }

h1 span:nth-child(11) { -webkit-animation-delay: 1s; animation-delay: 1s; }

h1 span:nth-child(12) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; bit.ly/3lFfN4Z

Done