Перебор с анимацией? Как сделать все стильно и останавливаться во время?

Question

[senefu]

Мучаюсь с анимацией карточек (предпоследний блок).
Глаз замылил...
Не перебор ли это с анимацией? anxious-sponge.surge.sh
Вариант попроще - lopsided-hand.surge.sh

Как бы вы сделали? Посоветуйте как качественно проанимировать карточку. Перебрал сотни примеров, ничего не получается...Я не дизайнер, делаю все в браузере.

Comments

[Kovalsky]

То есть вы спрашиваете нравится ли нам?

[senefu]

Никита Полевой: скорее, что можно исправить. На мой замыленный глаз - явно перебор. И мне самому не очень нравится. И идей уже нет. А что за сарказм?

[Kovalsky]

senefu: исправить можно что-то работающее неправильно, например. А с вашей анимацией вроде бы всё в порядке.

[senefu]

Никита Полевой: сорри, просто я работают без команды и это мой первый "настоящий" проект, поэтому хочется стороннего мнения иногда. Не все же на Тостер ходить когда вообще ничего не работает))

Answer 1

[Ivan Bogachev]

Первый вариант вполне неплох. Максимум, что можно еще попробовать добавить - это легкое размыливание (буквально 1px) для текста, который сереет и уходит на задний план. Я бы на вашем месте доделал возможность адекватно перемещаться по странице с помощью tab (а то фокус куда-то улетает постоянно) и подумал, что делать с этой красотой на touch-устройствах (кнопка "читать дальше" под ховером - плохая идея с точки зрения удобства использования).

Comments

[senefu]

Над accessibility я вообще не работал, оставил это на потом, когда время будет. Над размыливанием я думал, но я похожий эффект использую сразу в следующем блоке, поэтому отказался от него, т.к. повторяется. Сейчас посидел еще, подровнял тайминги и easing - стало лучше на порядок :) ПОхоже, ключ грамотных анимаций именно в этих мелочах.