
Demo:
To create the CSS Bouncing Text Effect follow the steps below and watch the video tutorial.
- Add HTML
- Add CSS
Step1.
Add HTML
<div class="bouncing-text">
<div class="b">B</div>
<div class="o">O</div>
<div class="u">U</div>
<div class="n">N</div>
<div class="c">C</div>
<div class="e">E</div>
<div class="shadow"></div>
<div class="shadow-two"></div>
</div>
Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
height: 100vh;
align-items: center;
justify-content:center;
display: flex;
}
.bouncing-text {
position: relative;
display: flex;
font-size: 70px;
font-family: arial black;
}
Style the letters:
.b, .o, .u, .n, .c, .e {
color: #4cc9f0;
text-shadow: 0 3px #4361ee, 0 5px #4361ee, 0 7px #4361ee;
}

Add the bounce effect animation:
@keyframes bounce {
0% { transform: scale(1,1) translateY(0); }
10% { transform: scale(1.1,.9) translateY(0); }
30% { transform: scale(.9,1.1) translateY(-55px);}
50% { transform: scale(1.05,.95) translateY(0); }
58% { transform: scale(1,1) translateY(-7px); }
65% { transform: scale(1,1) translateY(0);}
100% { transform: scale(1,1) translateY(0);}
}
.b {
animation: bounce 1s ease infinite;
}
.o {
animation: bounce 1s ease infinite .1s;
}
.u {
animation: bounce 1s ease infinite .2s;
}
.n {
animation: bounce 1s ease infinite .3s;
}
.c {
animation: bounce 1s ease infinite .4s;
}
.e {
animation: bounce 1s ease infinite .5s;
}
Add the shadow:
.bouncing-text:before, .bouncing-text:after {
content:"";
position: absolute;
background-color: rgba(0,0,0,0.4);
width: 50px;
height:5px;
border-radius:50%;
top:82px;
z-index:-1;
}
.shadow, .shadow-two {
position: absolute;
top:82px;
z-index:-1;
}
.shadow:before, .shadow:after, .shadow-two:before, .shadow-two:after {
content:"";
position: absolute;
background-color: rgba(0,0,0,0.4);
width: 50px;
height:5px;
border-radius:50%;
top:0;
}
.bouncing-text:before {
left:0;
animation: scale 1s linear infinite;
}
@keyframes scale {
0% {transform: scaleX(1);}
25% {transform: scaleX(0.4);}
50% {transform: scaleX(1);}
75% {transform: scaleX(0.9);}
100% {transform: scaleX(1);}
}
.bouncing-text:after {
left: 57px;
animation: scale 1s linear infinite .1s;
}
.shadow:before {
left: 116px;
animation: scale 1s linear infinite .2s;
}
.shadow:after {
left:175px;
animation: scale 1s linear infinite .3s;
}
.shadow-two:before {
left:232px;
animation: scale 1s linear infinite .4s;
}
.shadow-two:after {
left: 285px;
animation: scale 1s linear infinite .5s;
}
Watch also the video tutorial:
Enjoy coding!
Read also:
CSS Slide Text Animation/ Slide Effect
CSS Mirror/ Reflection Text Effect