Repaintless.css - библиотека для повышения производительности CSS анимации

В последние годы, CSS анимация стала регулярно использоваться в дизайне сайтов. При правильном применении, она может облегчить пользователям взаимодействие с вашим сайтом. К сожалению, существует высокая вероятность того, что, применяя CSS анимацию, вы заставляете браузер пользователя выполнять дорогостоящие операции, замедляющие всю страницу.

Один из лучших способов снизить нагрузку CSS анимации на страницу, это применение FLIP метода. Он заключается в перераспределении таких дорогих свойств анимации, как width, height, left и top, с применением трансформации, что делает их значительно дешевле. Делается это с помощью двух снапшотов, один из которых определяет первую (F) позицию элемента, а другой последнюю (L). Затем, используется трансформация для инвертирования (I) элемента. В конце, проигрывается (P) анимация, путем удаления трансформаций, применяемых на стадии инвертирования.

Таким образом, вы удаляете трансформации, вместо того, чтобы применять их. Это означает, что браузер заранее знает точки А и Б движения элемента, а значит способен запустить анимацию быстрее.

Самый простой способ применения этого метода, использование готовой библиотеки Repaintless.css. Она есть в репозитории Github, вместе со всеми инструкциями и примерами.