"Text animation"
Bootstrap 4.1.1 Snippet by koshikojha

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet"> <div class="footer-top"> <div class="container"> <div class="footer-logo col-xs-12 text-center"> <h2 align="center" class="cssanimation leSnake sequence">Endlessness</h2> </div> <h3 align="center">Design by <a target="_blank" href="http://www.wedoodles.com/">Koshik ojha</h3> </div> </div>
body{margin:0;padding:0;} .footer-top{ background-color: #0F3661; padding: 75px 0;} .footer-logo h2 { color: #fff; font-size: 50px; margin: 0; text-transform: uppercase; text-align:center; font-family: 'Arimo', sans-serif; } h3{color:#fff;padding-top:5%;font-family: 'Arimo', sans-serif;} h3 a{text-decoration:none;color:#fff;font-weight:900} h2{width:100%;text-align:center;} .open,.wipe{ margin:0 auto; overflow:hidden } .open,.typing,.wipe{ overflow:hidden } .cssanimation,.cssanimation span{ -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both } .cssanimation span{ display:inline-block } .infinite{ -webkit-animation-iteration-count:infinite!important; animation-iteration-count:infinite!important } .leSnake span{ -webkit-animation:leSnake 1.5s ease-in-out; animation:leSnake 1.5s ease-in-out; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite } @-webkit-keyframes leSnake{ from,to{ -webkit-transform:translateY(0); transform:translateY(0) } 50%{ -webkit-transform:translateY(30px); transform:translateY(30px) } } @keyframes leSnake{ from,to{ -webkit-transform:translateY(0); transform:translateY(0) } 50%{ -webkit-transform:translateY(30px); transform:translateY(30px) } }
function animateSequence(){for(var n=document.getElementsByClassName("sequence"),a=0;a<n.length;a++){var e=n[a],t=e.innerHTML;t=t.trim();var i="",m=100;for(l=0;l<t.length;l++)" "!=t[l]?(i+='<span style="animation-delay:'+m+"ms; -moz-animation-delay:"+m+"ms; -webkit-animation-delay:"+m+'ms; ">'+t[l]+"</span>",m+=150):i+=t[l];e.innerHTML=i}}function animateRandom(){for(var n=document.getElementsByClassName("random"),a=0;a<n.length;a++){var e=n[a],t=e.innerHTML;t=t.trim();var i=70,m=new Array,o=new Array;for(j=0;j<t.length;j++){for(;;){var r=getRandomInt(0,t.length-1);if(-1==m.indexOf(r))break}m[j]=r}for(l=0;l<m.length;l++){var s="",d=m[l];" "!=t[d]?(s='<span style="animation-delay:'+i+"ms; -moz-animation-delay:"+i+"ms; -webkit-animation-delay:"+i+'ms; ">'+t[d]+"</span>",o[d]=s):o[d]=t[d],i+=80}o=o.join(""),e.innerHTML=o}}function getRandomInt(n,a){return Math.floor(Math.random()*(a-n+1))+n}window.onload=function(){animateSequence(),animateRandom()};

Related: See More


Questions / Comments: