will-change
Hints the browser about upcoming property changes for optimization. Overuse degrades performance; reset with wca.
Class List
| Class | CSS | Description |
|---|---|---|
wca | will-change: auto | Default. Browser decides optimization automatically |
Usage Examples
will-change creates a separate layer for GPU acceleration. Always reset after animations.
<!-- Optimize transform on hover (apply to parent) -->
<div class="hover-wct">
<div class="tall200msease hover-ts1-1">
Card that scales up on hover
</div>
</div>
<!-- Reset after animation -->
<div class="wca">
Element with will-change reset
</div>Tips & Notes
Do not overuse — causes performance degradation
Applying to all elements creates unnecessary layers, increasing memory and worsening performance.
Add before animation, remove after
Add will-change via JavaScript before animation, reset with wca after.
Use as last resort
Most CSS transitions/animations auto-optimize. Apply will-change only when performance issues confirmed.