<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="container"> <div class="mk22"> <h2 class= style="text-align:center">Text Animation by <i class="red">M</i>ilind <i class="red">K</i>amthe</h2> <p style="text-align:center">creativemk22@gmail.com</p> </div> <hr> <div class="main-area"> <span class="a1">M</span> <span class="a2">I</span> <span class="a3">L</span> <span class="a4">I</span> <span class="a5">N</span> <span class="a6">D</span> <span class="fa fa-futbol-o a6 st2"></span> <span class="a6">K</span> <span class="a5">A</span> <span class="a4">M</span> <span class="a3">T</span> <span class="a2">H</span> <span class="a1">E</span> </div> <div class="text-center"> <a class="btn btn-success bt">Click Here</a> </div> <script> $("document").ready(function(){ $(".bt").click(function(){ $("span").toggleClass("a0") }) }) </script>

.main-area{width:100%;background:#ccc;position:relative;margin:0 auto;margin-top:100px;} span{font-size:100px;font-weight:bold;float:left;transition:all 5s ease;letter-spacing:10px;opacity:0;text-shadow:0 0 2px #000;text-decoration:underline;animation:vmk 200ms infinite ;} .a1{transform:translate(-200px,100px);color:red;} .a2{transform:translate(-500px,-50px);color:green;} .a3{transform:translate(500px,150px);color:blue;} .a4{transform:translate(200px,-100px);color:brown;} .a5{transform:translate(200px,200px);color:orange;} .a6{transform:translate(300px,200px);color:lightgreen;} .bt{margin-top:100px;color:#fff !important;} .a0{transform:translate(0px,0px)rotateY(1440deg);opacity:1;transition:all 5s ease;} .red{color:red;font-style:normal} .mk22{margin:0 auto;text-align:center;} @keyframes vmk{ from{filter:grayscale(100%);} to{filter:grayscale(0%)} } .st2{text-decoration:none;font-size:35px !important;margin:0;position:relative;bottom:-110px;left:5px;animation:rotate22 1s linear infinite !important;} @keyframes rotate22{ from{transform:rotateX(0deg)} to{transform:rotateX(360deg)} }