Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

seoАвтор: Пуск‑Медиа (импорт)Просмотры: 4

will-change: когда GPU-слой помогает, а когда ест память

Подсказка композитору перед анимацией и обязательное снятие после.

Изображение статьи: will-change: когда GPU-слой помогает, а когда ест память

will-change: transform заранее создаёт слой для анимации — сглаживает jank, но каждый слой стоит памяти на мобильных.

Ставьте только на время hover/открытия модалки и снимайте в animationend — не оставляйте на сотнях карточек каталога.

- [will-change — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) — Рекомендации по использованию.

- [Stick to compositor-only properties — web.dev](https://web.dev/articles/animations-guide) — Безопасные свойства для анимации.

---

## Альтернатива

Чаще достаточно transform + opacity без will-change, если анимаций мало.

#CSS#производительность#анимация

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.