Может ли частое использование transition в css лагать сайт?

Question

[Luka Tarkhnishvili]

Или что может стать причиной лага сайта несколко секунд после загрузки?(лагают все элементы в которых используется transition )и как избавится от лага?

Comments

[Ден Тоцкий]

Пример покажите что за лаги

[Luka Tarkhnishvili]

Ден Тоцкий: Как показать лаг? например: .test { width:100px;transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .test:focus{width:300px} и при фокусе лагает момент с 100 до 300 пикселей

[Ден Тоцкий]

Да Ну: ну раз уж вы используете конкретные изменения допустим ширины можно это оптимизировать так "transition: width .3s ease-in-out;" т.е. в место all пишите конкретно что меняется. если несколько свойств то допустим так "transition: background ease .2s, color ease .2s;" через запятую. Еще модно вместо изменения width использовать transform: scale(); или transform: translate3d(); они по идее более оптимизированы в следствии чего у вас фпс не будет просаживаться

[Luka Tarkhnishvili]

Ден Тоцкий: Спасибо, исправлю. может ли еще что нибудь стать причиной лага?

[Ден Тоцкий]

Да Ну: вот почитайте статья как раз в тему https://habrahabr.ru/post/308006/ в комментариях также интересные мысли

[Luka Tarkhnishvili]

Ден Тоцкий: Спасибо за ссылку.

Answer 1

[Faliah]

Для начала, ответ на вопрос - да, частое использование transition в css может лагать сайт

Анимации могут добатить лагов, если сделаны без понимания сути работы механизма. В частности самыми дешевыми на данный момент (применимо к chrome и частично firefox, не могу сказать за IE и Edge) являются анимации свойств opacity, различные transform: translate, scale, rotate.
Последнее время в этих вопросах я почитываю различные метериалы от инженера Google Paul Lewis'а, вот ссылки на несколько материалов:
Статья из его личного блога по animation performance
Статья по animation performance совместно с Paul Irish
Нереально крутой туториал по параллаксу, от которо...
Плейлист в Google Developers на Youtube, где Пол и...

Answer 2

[Денис Т]

полезная статейка по вашей теме
https://habrahabr.ru/company/yandex/blog/239169/