<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"> <span class="mytext1">Hello This is </span> <span class="mytext2"> Alrazy </span> </div>

*{ padding: 0; margin: 0; font-family: sans-serif; } body{ background: #002f5f; } .container{ text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; } .container span{ text-transform: uppercase; display: block; } .mytext1{ color: white; font-size: 60px; font-weight: 700; letter-spacing: 8px; margin-bottom: 20px; background: #002f5f; position: relative; animation: text 3s 1; } .mytext2{ font-size: 30px; color: #E91E63; font-weight: bold; font-family: cursive; } @keyframes text { 0%{ color: black; margin-bottom: -40px; } 30%{ letter-spacing: 25px; margin-bottom: -40px; } 85%{ letter-spacing: 8px; margin-bottom: -40px; } }