A task not for the faint of heart, how to make a cunning CSS3 animation?

Question

css

Friends, this is not a standard, what is called, I broke my whole head, I can’t understand how to implement such a thing, technically there are no problems, there is a problem with an IDEA, with the correct approach that I can’t find in any way. The bottom line is that you need a block in which there is a line of text, and when you hover over it, this block is painted over in white using animation, from left to right, and IMPORTANT! The most basic point, so that the text changes color along with the animation, from left to right :) here is such a topic, it seems easy, but it doesn’t work, I made it so that the block that stretches from 0% to 100% with a white background, I duplicate the text inside, BUT TEXT JUMPS because of the small block space at the start of the animation.
Everything is clear in the example:
https://codepen.io/Cheizer/pen/aLvmBb/?editors=1100
How to implement such a thing? Help pliiiiiizzzzz!!! :)

Answer 1

Easy way https://codepen.io/Symphony/pen/aLvBbp
Unlike other ways supported: Edge, Webkit, Firefox, etc.
The length of the text does not matter.

Answer 2

for example like this https://codepen.io/DNLHC/pen/MmzwNg
try to pick up the timings

Answer 3

the simplest
white-space solution: nowrap; for .block-s
and the normal solution is not to change the width of the element, but position or translateX.

Answer 4

mix-blend-mode