【最短で分かる】transformとtransitionの違いを徹底解説。これでCSSの動きが一目で分かる！

---

transformとtransitionの違いを徹底解説

ウェブページの動きには大きく分けて2つの考え方があります。それが transform と transition です。

transform は要素そのものの形を変える力を持っています。例えば画像を回転させたいときは transform: rotate(45deg); を使いますが、同じ操作を別の方法で書いても結局は見た目を変えるだけです。重要なのは、transform はレイアウトには影響を与えず、要素の描画結果だけを変える点です。

もう少し具体的に言うと、ボックスの幅高さを直接変えるわけではなく、絵のように見える位置・形を変える機能です。移動は translate 系、回転は rotate、拡大縮小は scale で実現します。

一つの要素に対して複数の transform を同時に適用することもできます。例えば transform: translateX(50px) rotate(15deg) scale(1.1); のように書くと、左に50px動いて回転し、少し大きく見える効果になります。ここで順序は大切で、左の処理が先に行われてから次の変換が適用されるため、結果が変わることがあります。

実務では、アニメーションを作るときに transform を使って視覚的な動きを作り、レイアウトの崩れを避けることが推奨されます。例えばカードを浮かせるエフェクトや、ボタンをクリックしたときの反応などです。

transform は「形を変える力」だと覚えると分かりやすいでしょう。

1. transformの基本と使い方

transform の基本は、要素の「形」を変えることです。回転、移動、拡大縮小、斜めに傾ける skew などが含まれます。使い方は CSS に直接書くだけです。例として transform: rotate(45deg);、transform: translateX(100px)、transform: scale(1.2) などがあります。複数の変換を組み合わせる場合は左から順番に適用されるので、並べる順序を工夫すると望む動きを得られます。
また、transform はレイアウトの書き換えを起こさず、描画の段階で動作します。これにより、隣の要素との衝突を避けやすく、アニメーション時の滑らかさが保たれます。実務ではアイコンの回転、カードの浮き上がり、ボタンの反応など、視覚的な効果をつけたい場面でよく使われます。使いすぎには注意が必要で、目的に合った動きを選ぶことが大切です。

2. transitionの基本と使い方

transition は、要素のプロパティが変化するときの「変化の過程」を滑らかにするための機能です。変化対象のプロパティ、持続時間、タイミング関数、遅延を指定します。例えば transition: transform 0.5s ease と書くと、transform が 0.5秒かけて変化します。変化が起きるのはイベント（主に hover や class の切替え）です。transition は、描画の過程を滑らかにするためのもので、最終的な状態は最終値になります。実務では、ホバー時のボタンの色・サイズ・位置・影などを滑らかに変えたい場合に有効です。複数のプロパティを同時に transition することも可能で、例として transition: transform 0.3s ease, opacity 0.2s linear などと書くことができます。遅延を使えば、アニメーションの開始を遅らせることもできます。
ただし、transition は「いつ始まり、どう終わるか」を制御しますが、変化の結果その先のレイアウトがどう動くかは直接変えません。transform のような形の変化は別の設定と組み合わせるとより自然に見えることがあります。実務では、要素の状態が変わる瞬間を視覚的に伝えるために、transition を上手に使うとユーザー体験が向上します。

3. 実務での使い分けと注意点

実務での使い分けは、まず何を狙うか次第です。表示の滑らかさを求めるなら transition、要素の形自体の変化を作りたい場合は transform を使います。また、両者を組み合わせることも多いです。例えば、ホバー時にカードを浮かせつつ、最終形は変えたくない場合、transform と transition を組み合わせます。コード例としては、要素の初期状態を transform で設定し、state の切替えを transition で滑らかに変化させるパターンです。初心者はまず transform で動きを作り、次に transition で見た目の変化を整えると理解が進みます。
さらに注意点として、transform は先述のとおりレイアウトには影響を与えませんが、使いすぎや連続したアニメーションはパフォーマンスを下げることがあります。適切な持続時間を選び、過度なブラーや振動を避けましょう。テストは必須です。デバイス差があるため、複数の環境で動作を確認することが大切です。

ピックアップ解説

koneta: 今日の小ネタは transform の使い方のコツです。 transform は要素の“形”を変える力なので、動かす方向だけを考えると失敗しやすいです。実務で効果的なのは、まず最初に要素の形を整え、次にその形を動かすアニメーションを加える順番で作ること。そうすることで、最終的に崩れることなく、滑らかで気持ちの良い動きに仕上がります。ポイントは「過度になりすぎないこと」と「順序の組み合わせ」です。

例えばボタンを押すとき、transform: scale(0.98) で微小な縮小を作り、離したときに元に戻すように transform を使い、transition でその戻りを滑らかにします。こうすればクリック時の反応が自然に見え、UI の一体感が増します。

---