10 принципов плавной веб-анимации
Один этот принцип даст 80% эффекта, даже на телефоне. Наверняка вы уже слышали этот совет, но тем не менее ему мало кто следуют. Точно также, все знают что правильное питание и упражнения залог здоровья, но всё-равно почти никто не делает.
Если нужно уменьшить объект, используйте transform: scale() вместо изменения ширины. Если нужно сдвинуть объект, вместо margin или padding (браузер будет перестраивать весь layout страницы для каждого кадра), возьмите transform: translateX или transform: translateY.