JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris massa, fermentum sit amet auctor sed, rutrum a erat. Nullam vitae interdum purus, nec mattis ipsum. In rutrum sodales dapibus. Donec eu elit euismod, rhoncus mi nec, scelerisque quam. Etiam ut justo vel risus gravida tristique. Curabitur a sapien tristique, pellentesque lectus id, consequat tortor. Nam mattis pulvinar libero, sed imperdiet nunc sollicitudin ut. Aliquam venenatis dui libero, sed cursus nibh vulputate id. Nam lacinia arcu sit amet justo auctor, ut molestie metus efficitur. Curabitur laoreet pharetra velit at laoreet. 
</div>

CSS

#block {
  width: 80%;
  margin: auto;
  border: 1px solid #000;
  padding: 1em;
  background: #FFF;
  position: relative;
}

#fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: yellow;
  z-index: 1;
  animation-name: animation;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes animation {
    0% { width: 0% }
    100% { width: 100% }
}

JavaScript

var myblock = document.getElementById('block'),
		myfill = document.createElement('div');
    
    myfill.id = 'fill';
    
function fillIt() {
	myblock.appendChild(myfill);
}

fillIt();