<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 ----------> <!-- Inspired by: https://stackoverflow.com/questions/37952222/animate-text-fill-from-left-to-right --> <div class="container"> HOW MUCH DO YOU RATE MOVIE? </div>

html { display: flex; align-items: center; height: 100%; background: black; } .container { font: bold 6vmax/.8 KHAND, Open Sans, Impact; background: black; color: white; mix-blend-mode: multiply; } @keyframes text-fill { to { background-size: 100% 100%; } } body { margin: auto; background: linear-gradient(crimson, crimson) turquoise no-repeat 0 0; background-size: 0 100%; animation: text-fill linear infinite; animation-duration: 20s; }