こんにちは！フロントエンドの世界へようこそ。
Webサイトを作っていると、「このボタン、ホバーした時にちょっとリッチに動かしたいな」とか、「テキストをふわっと浮かび上がらせたいな」なんて思いますよね。
でも、いざアニメーションを実装してみると、「あれ？ なんだかカクカクする……」「スマホで見るとちょっと動きが重いな？」と感じたことはありませんか？
実はそれ、ブラウザが「急に動かされたからびっくりして、慌てて計算している」のが原因かもしれません。今日は、そんなブラウザの「心の準備」を整えて、アニメーションをヌルヌル動かす魔法のプロパティ、`will-change`についてお話しします。
—
そもそも、なぜアニメーションは「カクつく」の？
例え話をしましょう。あなたが大きな荷物を運ぶ引っ越し屋さんだと想像してください。
普段、ブラウザ（あなた）はWebページという部屋を掃除して整えるのに大忙しです。そこへ突然「このボタンを高速で動かして！」と依頼が来ると、あなたは慌てて、「えっ、今から？ 重いものを動かすための台車も準備してないよ！」と焦ってしまいますよね。この「準備不足」によるドタバタが、画面上のカクつきの正体です。
そこで登場するのが `will-change` です。「これからこの要素を動かすよ！」と事前にブラウザに伝えておくことで、ブラウザはあらかじめ「GPU（グラフィック処理の専門家）」という強力な助っ人を呼び出し、台車を準備して待機してくれるんです。
—
`will-change` の使い方：魔法の呪文はこう唱える
使い方はとてもシンプルです。対象のインライン要素（`span` や `a` など）に対して、CSSでこう記述します。
/ アニメーションさせる予定のインライン要素に指定 /
.my-link {
/ これから「transform（変形）」を動かすよ！とブラウザに伝えます /
will-change: transform;
/ アニメーションの基本設定 /
transition: transform 0.3s ease;
}
.my-link:hover {
/ マウスが乗った時に少し大きくする /
transform: scale(1.1);
}
たったこれだけ！
`will-change: transform;` と書くことで、ブラウザは「ああ、この要素は変形するんだな。じゃあ今のうちに画像処理の準備をしておこう」と、裏側でこっそり準備を始めてくれます。
—
ちょっと待って！「何でもかんでも」は禁物です
ここで一つ、すごく大切な注意点があります。
`will-change` はとっても便利な魔法ですが、「とりあえず全部の要素に書いておこう！」というのは絶対にNGです。
なぜなら、GPUの助っ人たちは「常にスタンバイ」しているわけではないからです。全員をずっと待機させておくと、ブラウザ（あなたのPCやスマホ）が「常にフル稼働」の状態になり、逆にメモリを食いつぶして動作が重くなってしまいます。
例えるなら、「10人しかいない作業員を、家中の部屋の前に立たせておく」ようなもの。これでは、肝心な時に誰がどこにいるのか分からなくなってしまいますよね。
守ってほしい「3つの鉄則」
1. 必要なときだけ使う：アニメーションが始まる「直前」に指定するのが理想です。可能であれば、JavaScriptでクラスを付け替えて、アニメーション中だけ `will-change` を適用するのもプロのやり方です。
2. 終わったらそっと外す：アニメーションが終わったら、ブラウザの負担を減らすために `will-change: auto;` に戻してあげましょう。
3. 乱用しない：本当に「カクつきが気になる」ときだけ使いましょう。何もしなくてもスムーズに動いているなら、あえて書く必要はありません。
—
インライン要素での注意点
`span` や `a` といったインライン要素は、そのままでは `transform`（変形）が効きにくいことがあります。もしうまく動かないな？と思ったら、以下のCSSを試してみてください。
span.animate-me {
/ インライン要素を「ブロック」のように扱えるようにする /
display: inline-block;
/ ここにwill-changeを書くとスムーズに動きます /
will-change: transform;
}
`display: inline-block;` を指定することで、ブラウザがその要素を「一つの塊」として認識しやすくなり、GPUの恩恵をしっかり受けられるようになります。
—
最後に：あまり難しく考えすぎないで！
「GPUとかメモリとか、なんだか難しそう……」と身構えてしまうかもしれませんが、大丈夫です。最初は「動きがカクついたら、この呪文を思い出そう」という感覚で十分ですよ。
Web制作は、こうした「ブラウザへのちょっとした気遣い」の積み重ねで、どんどん快適になっていきます。ぜひ、自分の作ったボタンやテキストを、`will-change` で「ヌルヌル」と気持ちよく動かしてみてくださいね。
何かわからないことがあったら、いつでもまた聞きに来てください。あなたの素敵なWebサイト作りを、ずっと応援しています！
コメント