先日、Web制作を学んでいる受講生の方から、こんな相談をいただきました。

「transition: transform 2s linear 1s; と指定したアニメーションで、hoverすると2秒かけて四角形が右に移動する。動き自体は想定通りだが、transitionの中にtransformと書くことにどういう意味があるのか分からない」と。

実はこれ、CSSでアニメーションを学び始めた学習者がよくつまずくポイントです。今回は、この相談への回答をベースに、transitionとtransformの役割の違いを整理します。

相談内容：動きは実装できているが、書き方の意味が分からない

具体的なコードは次の通りです。

“`css
.box {
width: 80px;
height: 80px;
background: pink;
transition: transform 2s linear 1s;
}

.box:hover {
transform: translateX(400px);
}
“`

hoverすると四角形が2秒かけて右に400px移動する、という動き自体はできています。ただ、受講生の方は動画を見返したりMDNでtransformを調べたりしたうえで、「transitionの中でなぜtransformを名指しする必要があるのか」という点に疑問を持たれていました。自分で仮説を立てて調べる、という姿勢はとても良い学習の仕方です。

原因：transitionとtransformは、そもそも役割が違う

結論から言うと、この2つは別の役割を持つプロパティです。

• transform：要素の見た目（位置・大きさ・回転など）を変化させるプロパティ
• transition：あるプロパティの値が変化したときに、その変化を「一瞬」ではなく「なめらかに」見せるための仕組み

つまりtransformが「何をどう変えるか」を決め、transitionが「その変化をどう見せるか」を決めている、という関係になっています。

解決策：それぞれを指定しなかった場合で理解を深める

それぞれを指定しなかった場合を考えると、役割の違いがより分かりやすくなります。

① transitionを指定しなかった場合

“`css
.box:hover {
transform: translateX(400px);
}
“`

このようにtransitionなしでtransformだけを指定すると、hoverした瞬間に四角形が「パッ」と瞬間移動します。なめらかさは一切ありません。

② transform（プロパティ名）を指定しなかった場合

“`css
.box {
transition: 2s linear 1s;
}
.box:hover {
transform: translateX(400px);
}
“`

実は、transition-property（何を対象にするか）を省略した場合、初期値はallになります。そのため上のように書いても、hoverでtransformが変化すれば、ちゃんと2秒かけてなめらかに動きます。

つまり「transformと名指ししないと動かない」わけではありません。では何のために名指しするかというと、

• 複数のプロパティが同時に変化する要素で、特定のプロパティだけをなめらかにしたい場合
• 意図しないプロパティまで巻き込まれるのを防ぎたい場合

など、対象を絞り込む目的で指定します。今回のコードでは、対象を明確にするためにtransformと書かれている、ということです。

まとめ：transformが「何を変えるか」、transitionが「どう見せるか」

• transform：何を変化させるか（今回は位置）
• transition：その変化をどう見せるか（今回は2秒・等速・1秒遅延）
• transitionの中のtransform（プロパティ名）：なめらかにする対象を絞り込むための指定（省略するとallになり、結果的に動きが変わらないこともある）

Webサイトの制作やコーディングのセカンドオピニオン、またはメンタリングにお困りの方は、お気軽にご相談ください。

▶︎ 平林 颯太への制作・コンサルティング相談はこちら（Smile Creations お問い合わせフォーム）
▶︎ MENTAでのスポット相談はこちら