CSS Letter Bouncing Animation Text effect

This tutorial will show how to make CSS text bouncing effect with Animation using HTML, CSS and JavaScript. You have use this concept when new page loaded. When you have use this concept your website looks like very awesome. Text with individually bouncing letters using CSS animations, plus a little bit of JavaScript to apply the animation at different times for each character. Demo and download avilable.

HTML Code

 <div>      <p id="bounceTxt">W3tweaks</p> </div> 

CSS Code

 @import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700);  div {      position: absolute;      top: 50%;      width: 100%; }  p {      color: #265687;      font-family: "Montserrat Alternates", sans-serif;      font-size: 72px;      font-weight: 400;      letter-spacing: -0.05em;      text-align: center;      text-shadow: 3px 5px 5px rgba(0, 0, 0, .3);            em {           font-style: normal;           display: inline-block;                      &:nth-child(1) {                color: #4285F4;           }            &:nth-child(2) {                color: #E94D3D;           }            &:nth-child(3) {                color:#F7C945;           }            &:nth-child(4) {                color: #4285F4;           }            &:nth-child(5) {                   color: #34A853;           }            &:nth-child(6) {                color: #E94D3D;           }                      &.bounce-me {                -webkit-animation: bounce 4s infinite ease-in-out;                animation: bounce 4s infinite ease-in-out;           }      } }  @-webkit-keyframes bounce {      60% {           -webkit-transform: translate(0px, -200px) scale(1.2);           opacity: 0.8;           text-shadow: 0px 150px 20px rgba(0, 0, 0, 0.8);      } }  @keyframes bounce {      60% {           -webkit-transform: translate(0px, -200px) scale(1.2);           opacity: 0.8;           text-shadow: 0px 150px 20px rgba(0, 0, 0, 0.8);      } }  

JavaScript

var      myText = document.getElementById("bounceTxt").innerHTML,     wrapText = "";  for (var i=0; i<myText.length; i++) {      wrapText += "<em>" + myText.charAt(i) + "</em>"; }  document.getElementById("bounceTxt").innerHTML = wrapText;  var      myLetters = document.getElementsByTagName("em"),     j = 0;  function applyBounce() {      setTimeout(function() {           myLetters[j].className = "bounce-me";           j++;                      if (j < myLetters.length) {                applyBounce();           }      }, 250); }  applyBounce();

Preview