Как плавно изменить width?

Question

[pvshvb]

Вот с помощью translate можно очень плавно перемещать divы, с хорошим количеством фпс

Но если менять width или height, анимация уже не такая плавная, есть ли способ изменить эти параметры так же плавно как и в translate?

Answer 1

[Полина Емельянова]

Попытайся анимировать не собственно ширину или высоту а max-width/max-hiegth
Эти своства куда как проще анимируются.
Порядок действий - задать как ширину в 100%, и максимальную ширину, которая будет стартвой
На ховер (или как у тебя) - меняй максимальную ширину.
Плавнее должно быть.

Answer 2

[Pavstyuk]

Плавно менять width и height практически не получится, т.к. от их размеров зависит контент всей страницы. Браузеру приходится пересчитывать все остальные элементы в зависимости от параметров текущего.
Как вариант, если элементу задать абсолютное или фиксированное позиционирование анимация становится плавнее, т.к. элемент выпадает из общего контекста страницы. Попробуйте. Также используйте свойство will-change иногда это может помочь. Но лучше transform для анимации не найти.