Задачка не для слабонервных, как сделать хитрую CSS3 анимацию?

Друзья, вот что не стандарт что называется, всю голову сломал, не могу понять как реализовать такую штуку, технически тут проблем нет, тут проблема с ИДЕЕЙ, с подходом правильным который никак не могу найти. Суть в том что нужен блок, в котором есть строка текста, и при наведении на него, этот блок закрашивается в белый цвет с помощью анимации, слева направо, и ВАЖНО! Самый основной момент, что бы текст менял цвет вместе с анимацией, слева направо :) вот такая тема, вроде несложно, но не получается, сделалл так что блок который растягивается с 0% на 100% с белым фоном, внутри дублирую текст, НО ТЕКСТ СКАЧЕТ из за маленького пространства блока на старте анимации.
В примере все понятно:
https://codepen.io/Cheizer/pen/aLvmBb/?editors=1100

Как реализовать такую штуку? Помогите Плииииииизззз!!! :)
  • Вопрос задан
  • 699 просмотров
Решения вопроса 1
Symphony
@Symphony Куратор тега CSS
Простой способ https://codepen.io/Symphony/pen/aLvBbp
В отличие от других способов поддерживается: Edge, Webkit, Firefox и т.д.
Длина текст не имеет значения.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Machinez
@Machinez
например так https://codepen.io/DNLHC/pen/MmzwNg
попробуй тайминги подобрать
Ответ написан
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
самое простое решение
white-space: nowrap; для .block-s
а нормальное решение - менять не width элемента а position или translateX.
Ответ написан
Комментировать
0xD34F
@0xD34F Куратор тега CSS
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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