<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 Created 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-4 col-offset-2" style="margin:0 auto"> <div class="heart"> <img src="http://pngimg.com/uploads/heart/heart_PNG51259.png" alt="heart"/> <div class="myname"> <marquee>Hii, I Am Milind Kamthe And I Am A Web Designer</marquee> </div> </div> </div> </div> </div>

.heart { width: 300px; position: relative; display: block; overflow:hidden;margin-top: 100px;animation:clrchange1 500ms linear infinite alternate;margin-bottom:200px; } @keyframes clrchange1{ from{width: 300px;filter:grayscale(0%)} to{width: 310px;filter:grayscale(100%)} } .heart img{width:100%;} .myname { position: absolute; font-size: 45px; color: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; font-weight: bold;animation:clrchange 1s linear infinite alternate }