# will-change

> 要素がどのプロパティを変更する予定かをブラウザに事前通知し、最適化を促すプロパティです。transform、opacity等を指定できますが、過剰な使用はパフォーマンスを悪化させるため注意が必要です。

- カテゴリ: その他
- URL: https://www.css-dictionary.com/property/will-change/

## 構文

```css
will-change: auto | <animateable-feature>
```

## Tailwindでは

- `will-change-transform` → will-change: transform
- `will-change-auto` → will-change: auto
- 任意値: `will-change-[top,left]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 36+ / Firefox 36+ / Safari 9.1+ / Edge 79+

## コード例

### 例1: transformとopacityの変更を予告

```css
.animated-element {
  will-change: transform, opacity;
}
```

### 例2: ホバー時のアニメーション最適化

```css
.hover-effect:hover {
  will-change: transform;
  transform: scale(1.1);
}
```

### 例3: 最適化の解除

```css
/* アニメーション終了後 */
.element {
  will-change: auto;
}
```

## TIPS

使いすぎるとメモリを消費。アニメーション前に設定し、終了後にautoに戻す。

## よくある間違い

常時設定するとパフォーマンスが悪化する場合がある。

## AIがよく間違えるポイント

AIは「アニメーションを滑らかに」という要望でwill-changeを無差別に振りかけがちですが、常時付与はメモリを浪費し逆効果です。原則は「問題が実測されたときに、アニメ直前に付けて終わったら外す」。多くの場合はtransform/opacityベースのアニメに直す方が先決です。

## AIへの依頼文例

- このwill-changeだらけのCSSを監査して、本当に必要な箇所だけに整理して

## 関連プロパティ

- [transform](https://www.css-dictionary.com/property/transform.md)
- [opacity](https://www.css-dictionary.com/property/opacity.md)
- [animation](https://www.css-dictionary.com/property/animation.md)