Плавное горизонтальное окрашивание текста

function addClass() { 
  var $overlay = document.querySelector('.overlay'); 
  $overlay.style.clip =  'rect(0 '+$overlay.clientWidth+'px 24px 0)'; 
} 
 
function removeClass() { 
  var $overlay = document.querySelector('.overlay'); 
  $overlay.style.clip =  'rect(0 0 24px 0)'; 
}

.conteiner { 
  position: relative; 
} 
 
.origin { 
  display: block; 
  text-align: start; 
  color: gray; 
  background-color: white; 
} 
 
.overlay { 
  display: block; 
  text-align: start; 
  position: absolute; 
  top: 0; 
  left: 0; 
  clip: rect(0px 0px 24px 0px); 
  transform: translate3d(0px, 0px, 1px); 
  transition: clip 10s linear; 
  background-color: white; 
}

<div class="conteiner"> 
  <div class="origin"> 
    Notre feuille de route était claire : valoriser l’incroyable apport</div> 
  <div class="overlay">Notre feuille de route était claire : valoriser l’incroyable apport </div> 
</div> 
<div> 
  <button onclick="addClass()"> 
    Paint 
  </button> 
 
  <button onclick="removeClass()"> 
    unPaint 
  </button> 
</div>

document.querySelector('button').onclick = function () { 
  document.querySelector('.fill').classList.toggle('fill--filled'); 
}

.fill { 
  position: relative; 
  padding: 2px 4px; 
  display: inline-block; 
} 
 
.fill--filled:before { 
  position: absolute; 
  content: " "; 
  width: 100%; 
  height: 100%; 
  background: yellow; 
  z-index: -1; 
  left: 0; 
  top: 0; 
  transform-origin: 0 0; 
  animation: fill .5s; 
} 
 
@keyframes fill { 
  0% { 
    transform: scaleX(0); 
  }, 
   
  100% { 
    transform: scaleX(1); 
  } 
}

<p class=fill>Какой-то текст</p> 
 
<button>Toggle fill</button>