Home CSS Bouncing Text Animation Using Only CSS

Bouncing Text Animation Using Only CSS

1505
0
SHARE

Bounce text animation

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; }
h1 span:nth-child(13) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
h1 span:nth-child(14) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }

As you can see in above code each span element has different animation time to produce jig jag effect in text animation.

Before sharing more detailed coding I would like to share my two recent articles that will also will be helpful for you:
  1. Mouse over Parallax or 3D Tilt Effect
  2. Button Decoration using Pseudo Elements

Now, let’s start coding in more details :

HTML Structure:
<h1>
  <span>c</span>
  <span>s</span>
  <span>s</span>
  <span>3</span><br>
  <span>T</span>
  <span>r</span>
  <span>a</span>
  <span>n</span>
  <span>s</span>
  <span>i</span>
  <span>t</span>
  <span>i</span>
  <span>o</span>
  <span>n</span>
</h1>
html, body {
  width: 100%;  
  height: 100%;
  background: #76b852;
  background: -webkit-linear-gradient(to left, #76b852 , #8DC26F);
  background: -webkit-linear-gradient(right, #76b852 , #8DC26F);
  background: linear-gradient(to left, #76b852 , #8DC26F);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

h1 {
  text-align:center;
}

h1 span {
  position: relative;
  top: 20px;
  display: inline-block;
  -webkit-animation: bounce .3s ease infinite alternate;
          animation: bounce .3s ease infinite alternate;
  font-family: 'Titan One', cursive;
  font-size: 80px;
  line-height:110px;
  color: #FFF;
  text-shadow: 0 1px 0 #CCC,
               0 2px 0 #CCC,
               0 3px 0 #CCC,
               0 4px 0 #CCC,
               0 5px 0 #CCC,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
			   0 10px 0 transparent,
               0 11px 0 transparent,
               0 12px 0 transparent,
               0 13px 0 transparent,
			   0 14px 0 transparent,
               0 15px 0 transparent,
               0 10px 10px rgba(0, 0, 0, .4);
}

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; }
h1 span:nth-child(13) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
h1 span:nth-child(14) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }

@-webkit-keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 #CCC,
                 0 7px 0 #CCC,
                 0 8px 0 #CCC,
                 0 9px 0 #CCC,
				 0 10px 0 #CCC,
               0 11px 0 #CCC,
               0 12px 0 #CCC,
               0 13px 0 #CCC,
			   0 14px 0 #CCC,
               0 15px 0 #CCC,
                 0 50px 25px rgba(0, 0, 0, .2);
  }
}

@keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 #CCC,
                 0 7px 0 #CCC,
                 0 8px 0 #CCC,
                 0 9px 0 #CCC,
				  0 10px 0 #CCC,
               0 11px 0 #CCC,
               0 12px 0 #CCC,
               0 13px 0 #CCC,
			   0 14px 0 #CCC,
               0 15px 0 #CCC,
                 0 50px 25px rgba(0, 0, 0, .2);
  }
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here