Собирайте все анимируемые элементы (если анимируете группой) в один абсолютный, и двигайте через transform: translateX(<смещение>), translateY(<смещение>), translateZ(<смещение>) вместе со свойством transition. Это все CSS3.
Как альтернативный вариант, тег , в том числе WebGL (например, инструмент
https://github.com/PixelsCommander/HTML-GL)
Общее правило по оптимизации анимаций, в котором нужно двигаться — максимально уменьшите количество анимируемых элементов, их сложность (вложенность), каскадность стилей, делайте элементы абсолютно позиционированными, простыми (без прозрачности, градиентов, закруглений, и прочего), делайте самый минимум DOM модификаций, и по-возможности анимируйте при помощи CSS3 или .
Нужно чтобы браузер выполнил минимум операций при перерисовке страницы во время анимации.
Чтобы посмотреть что рисует браузер во время анимации, есть удобный инструмент.
https://developer.chrome.com/devtools/docs/renderi...
На скриншоте есть "Show paint rectangles". Включите это, увидите как браузер реально перерисовывает страницу.
