Text Background Color using CSS Transition

<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='https://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>