Как сделать анимацию перекрашивания слева направо текста вместе с фоном?

Question

[Cheizer]

Нужен блок, в котором есть строка текста, и при наведении на него, этот блок закрашивается в белый цвет с помощью анимации, слева направо, и самый основной момент, чтобы текст менял цвет вместе с анимацией, слева направо. Сделал так, что блок, который растягивается с 0% на 100% с белым фоном, внутри дублирую текст, но текст скачет из-за маленького пространства блока на старте анимации.
В примере все понятно:
https://codepen.io/Cheizer/pen/aLvmBb/?editors=1100

Answer 1

[A K]

Простой способ https://codepen.io/Symphony/pen/aLvBbp
В отличие от других способов поддерживается: Edge, Webkit, Firefox и т.д.
Длина текст не имеет значения.

Comments

[Cheizer]

Благодарю! Даже не знал о таком свойстве, оно как раз и придумано для подобного случая оказывается :))

Answer 2

[0xD34F]

mix-blend-mode

Answer 3

[Danila]

например так https://codepen.io/DNLHC/pen/MmzwNg
попробуй тайминги подобрать

Comments

[Cheizer]

Спасибо, но я не пойму как разобрать пример на обычный html и css :))

Answer 4

[iBird Rose]

самое простое решение
white-space: nowrap; для .block-s
а нормальное решение - менять не width элемента а position или translateX.