Text Background Color using CSS Transition

index.html

<style>
  .clip-text {
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: arial
}
.clip-text_one {
    background-color: #CCC;
    background-image: url("data:image/svg+xml;utf8,<svg width='325px' height='50px' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='100%' height='100%' style='fill: red;'/></svg>");
    /*background-size: 100px 100px;*/
    background-repeat: no-repeat;
    background-position: 0px 0;
    -webkit-transition:background-position .5s ease-in;  
    -moz-transition:background-position .5s ease-in;  
    -o-transition:background-position .5s ease-in;  
    transition:background-position .5s ease-in; 
}

.clip-text_one:hover {
    background-position: 600px 0;
    -webkit-transition:background-position .5s ease-in;  
    -moz-transition:background-position .5s ease-in;  
    -o-transition:background-position .5s ease-in;  
    transition:background-position .5s ease-in; 
}
</style>
<div class="clip-text clip-text_one">Click this for transition</div>