<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 ----------> <div class="container"> <h2 style="text-align:center">Animation by <span class="red" style="color:red">M</span>ilind <span class="red" style="color:red">K</span>amthe</h2> <p style="text-align:center">creativemk22@gmail.com</p> <hr> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12"> <div class="word_section" style="text-align:center;margin:0 auto"> <span class="m1">M</span> <span class="m2">I</span> <span class="m1">L</span> <span class="m2">I</span> <span class="m1">N</span> <span class="m2">D</span> <span class="m1" >_</span> <span class="m1">K</span> <span class="m2">A</span> <span class="m1">M</span> <span class="m2">T</span> <span class="m1">H</span> <span class="m2">E</span> </div> </div> </div> </div>

.word_section span{font-size:100px;font-weight:bold;} .m1{animation:mk1 500ms linear infinite alternate;} .m2{animation:mk2 500ms linear infinite alternate;} .word_section{animation:mk22 700ms linear infinite alternate;} @keyframes mk1{ from{color:rgb(92, 184, 92);} to{color:rgb(51, 122, 183);} } @keyframes mk2{ from{color:rgb(51, 122, 183);} to{color:rgb(92, 184, 92);} } @keyframes mk22{ from{letter-spacing:2px;border-bottom:5px dotted rgb(92, 184, 92);} to{letter-spacing:0px;border-bottom:5px dotted rgb(51, 122, 183);} } @media only screen and (max-width:767px){ .word_section span{font-size:25px;font-weight:bold;} }