Выбор ответа Junior Анимации спрашивают часто обновлено
Какие свойства анимировать дёшево
Вопрос
Нужно плавно сдвинуть карточку на 100px вправо. Какой способ обычно даст самую плавную анимацию?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: transform: translateX(100px) с transition по transform. transform не меняет геометрию документа, поэтому кадр обходится без layout и paint: браузер только сдвигает готовый слой на этапе composite. left и margin-left меняют положение в раскладке и на каждом кадре запускают layout и перерисовку.
Варианты ответа
transform: translateX(100px)с transition поtransformправильный ответleft: 100pxс transition поleftуposition: relativemargin-left: 100pxс transition поmargin-leftwidthс transition: расширить блок слева пустым местом
Разбор
transform не меняет геометрию документа, поэтому кадр обходится без layout и paint: браузер только сдвигает готовый слой на этапе composite. left и margin-left меняют положение в раскладке и на каждом кадре запускают layout и перерисовку. Изменение width тоже пересчитывает раскладку, да и визуально это не сдвиг.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.