Чтобы добиться плавной анимации при большом количестве интерактивных элементов, можно воспользоваться следующими рекомендациями:

• Планировать появление анимации. 1 Все анимации нужно запускать в разное время, чтобы избежать задержек на экране. 1 Обычно 2–3 анимации могут работать без задержек одновременно, особенно если они стартуют с небольшим разбросом по времени. 1
• Использовать свойства, изменение которых не заставляет браузер перерисовывать всю страницу. 3 Например, трансформации и прозрачность лучше всего обрабатываются видеокартой, что повышает скорость и плавность анимаций. 5
• Выносить анимированные элементы на отдельный слой. 34 Это позволит обрабатывать элементы, не затрагивая другие элементы. 4
• Использовать свойство will-change. 34 Оно заранее сообщает браузеру о тех свойствах, которые будут анимированы. 3 При этом браузер оптимизирует анимацию и, если нужно, переносит рендеринг на видеокарту. 3
• Если элемент визуально отсутствует на странице после или до анимации, то необходимо скрыть его. 3 Это освободит ресурсы браузера. 3
• Запускать анимации последовательно. 3 Лучше для этого не использовать delay, потому что это равнозначно одновременному запуску нескольких анимаций, что съедает ресурсы. 3
• Тестировать анимацию на разных, особенно слабых, устройствах. 3 Если анимация тормозит, можно изменить подход или как-то оптимизировать её. 3

Выбор конкретных мер зависит от ситуации и целей разработчика.