Will-change
Learn to give performance hints with will-change.
Performance hints with will-change
The will-change property tells the browser how an element is about to change. The browser sets up a compositor layer in advance so the animation runs smoothly.
For example, .card { will-change: transform; } moves the card onto its own layer. When the card moves, only composite runs; layout and paint are skipped.
Misusing will-change
will-change is a strong hint but not for every element. Each value creates a new layer; layers cost memory. Stack up hundreds and the browser slows down.
Use it right: add it just before the animation, remove it after. A permanent will-change only makes sense for special cases like an element that spins forever.
Exercise Prepare a card hover animation with will-change
Complete the CSS below. Add will-change: transform and transition: transform 0.2s ease to .card. In .card:hover add transform: scale(1.04).
Show example solution
/* card hover animation */
.card {
will-change: transform;
transition: transform 0.2s ease;
}
.card:hover {
transform: scale(1.04);
}Test yourself
-
When should will-change be used?
- On every element, as a precaution
- On page load, permanently
- Only for aesthetics, no performance
- Before an animation, briefly
Show answer
Before an animation, briefly — Correct. will-change is added before an animation and removed after; permanent use wastes memory.
-
Write the will-change value
.card { /* for hover animation */ will-change: ____; }Show answer
.card { /* for hover animation */ will-change: transform; } -
Match each will-change value to its meaning
- transform
- Motion and scaling
- opacity
- Alpha change
- scroll-position
- Scroll animation
- contents
- Content change
- auto
- Standard behavior