Categories
CSS Web development

CSS Bouncing Text Animation

CSS Bouncing Text Effect

Demo:

*to see the animation on the website click here.

To create the CSS Bouncing Text Effect follow the steps below and watch the video tutorial.

  1. Add HTML
  2. 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;
}
CSS Bounce effect text animation

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!