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

Нужен блок, в котором есть строка текста, и при наведении на него, этот блок закрашивается в белый цвет с помощью анимации, слева направо, и самый основной момент, чтобы текст менял цвет вместе с анимацией, слева направо. Сделал так, что блок, который растягивается с 0% на 100% с белым фоном, внутри дублирую текст, но текст скачет из-за маленького пространства блока на старте анимации.
В примере все понятно:
https://codepen.io/Cheizer/pen/aLvmBb/?editors=1100
  • Вопрос задан
  • 723 просмотра
Решения вопроса 2
Symphony
@Symphony Куратор тега CSS
Простой способ https://codepen.io/Symphony/pen/aLvBbp
В отличие от других способов поддерживается: Edge, Webkit, Firefox и т.д.
Длина текст не имеет значения.
Ответ написан
0xD34F
@0xD34F Куратор тега CSS
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Machinez
@Machinez
например так https://codepen.io/DNLHC/pen/MmzwNg
попробуй тайминги подобрать
Ответ написан
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
самое простое решение
white-space: nowrap; для .block-s
а нормальное решение - менять не width элемента а position или translateX.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы