CSSのtransitionを徹底解説！アニメーションの基本書式と適用方法

transitionの基本書式と適用方法（プロパティ・時間・イージング）

先生と生徒の会話形式で理解しよう

生徒

「ホームページのボタンにマウスをのせたとき、パッと色が変わるのではなく、ゆっくりふわっと色が変わるようにしたいです！」

先生

「それは『transition（トランジション）』という命令を使うと簡単にできますよ。アニメーション効果のような変化を作ることができるんです。」

生徒

「なんだか難しそうですが、パソコンを触ったことがない私でも設定できますか？」

先生

「大丈夫ですよ。変化させる時間や動きの種類を決めるだけです。基本的な書き方を一緒に学んでいきましょう！」

1. transitionとは？変化を滑らかにする魔法の言葉

ウェブサイトを見ているときに、ボタンにマウスを合わせると、色がじわーっと変わったり、画像がゆっくり大きくなったりするのを見たことはありませんか？通常、CSSで設定を変えると一瞬で切り替わりますが、その「一瞬の変化」を「時間の経過を伴う変化」に変えてくれるのが、transition（トランジション）というプロパティです。

プログラミング未経験の方に例えるなら、部屋の電気のスイッチと同じです。普通のスイッチは押した瞬間にパッと明るくなりますが、ダイヤル式の調光ライトなら、ゆっくり明るくしていくことができますよね。この「ゆっくり変化させる過程」をCSSで作るのがトランジションの役割です。

難しい言葉を使わずに言うと、「変化の途中を補ってくれる機能」です。これを使うだけで、ウェブサイトがグッと本格的でプロっぽい印象になります。まずは、このトランジションが「プロパティ」「時間」「イージング」という3つの大きな要素で成り立っていることを覚えておきましょう。

2. トランジションを構成する3つの要素を理解しよう

トランジションを使いこなすには、3つの設定項目を知る必要があります。一つ目は「何を動かすか（プロパティ）」、二つ目は「どのくらいの時間をかけるか（時間）」、そして三つ目は「どんな動き方にするか（イージング）」です。

これを料理に例えてみましょう。

プロパティ： 料理の材料（例えば、卵の色や形を変えるなど）。
時間： 調理時間（3秒かけてじっくり焼くのか、1秒でサッと焼くのか）。
イージング： 火加減の調整（最初は強火で後から弱火にするのか、ずっと一定の弱火にするのか）。

これらをセットにして記述することで、思い通りのアニメーションが完成します。専門用語では、これを「トランジション・プロパティ」「トランジション・デュレーション」「トランジション・タイミング・ファンクション」と呼びますが、今はまだ名前を暗記しなくても大丈夫です。まずは、この3つをセットで考えるという感覚を掴んでください。

3. transitionの基本書式と書き方のルール

それでは、実際の書き方を見てみましょう。一番簡単な書き方は、これら3つの要素を一行にまとめて書く方法です。これを「ショートハンド」と呼びます。プログラミングでは、複数の命令を短くまとめることで、コードをスッキリさせることができます。

基本的な形は、transition: プロパティ時間イージング; という順番で書きます。例えば、背景色を2秒かけてゆっくり変化させたい場合は、transition: background-color 2s ease; のように記述します。ここで「2s」というのは「2秒（2 seconds）」という意味です。

この命令は、変化が起きる前の状態に書いておくのがルールです。ボタンの色を変えたいなら、マウスをのせる前のボタンの設定の中に、このトランジションの命令を書いておきます。そうすることで、マウスがのったときも、マウスが離れたときも、滑らかに色が変化するようになります。


<style>
    .color-box {
        width: 150px;
        height: 100px;
        background-color: skyblue;
        /* 背景色を1秒かけて滑らかに変える設定 */
        transition: background-color 1s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    /* マウスをのせたときの色を設定 */
    .color-box:hover {
        background-color: orange;
    }
</style>

<div class="color-box">触ってみてね</div>

ブラウザ表示

4. 変化させるプロパティの選び方

「プロパティ」とは、色や幅、高さなど、見た目を決める項目のことです。トランジションでは、どのプロパティをアニメーションさせるか指定できます。よく使われるのは、文字の色（color）、背景の色（background-color）、横幅（width）、透明度（opacity）などです。

特定の項目だけを指定することもできますが、すべての変化を滑らかにしたい場合は、プロパティの部分に「all」と書くこともできます。transition: all 0.5s ease; と書けば、その要素で起きるすべての変化が0.5秒かけて滑らかになります。初心者のうちは、この「all」を使うのが一番簡単で確実です。

ただし、なんでもかんでも「all」にすると、意図しない場所まで動いてしまうこともあるので、慣れてきたら「色の変化だけを遅くしたい」といった具合に、ピンポイントで指定できるようになると素敵です。プログラミングの第一歩は、この指定を一つずつ丁寧に行うことから始まります。

5. 時間の設定方法！秒とミリ秒の違い

変化にかける時間の指定は、非常に重要です。早すぎると変化に気づけませんし、遅すぎるとユーザーをイライラさせてしまいます。基本的には「秒（s）」を使って指定します。「1s」は1秒、「0.5s」は0.5秒（0.5の前に0をつけ忘れないようにしましょう）となります。

さらに細かい指定として「ミリ秒（ms）」という単位もあります。1000ミリ秒が1秒です。つまり「500ms」と書くのは「0.5s」と同じ意味になります。ウェブサイトのボタンなどの小さな動きには、0.3秒から0.5秒くらいの設定が、ちょうど心地よい変化として感じられることが多いです。

時間を設定するときは、自分の感覚だけでなく、実際に動かしてみて「気持ちいい」と感じる速さを探すのがコツです。パソコンに慣れていない方でも、数字を書き換えるだけで簡単に動きのスピードを変えられるので、色々と実験してみてください。


<style>
    .size-box {
        width: 120px;
        height: 120px;
        background-color: lightgreen;
        /* 横幅と高さを0.5秒かけて変える */
        transition: width 0.5s ease, height 0.5s ease;
    }
    .size-box:hover {
        width: 200px;
        height: 150px;
    }
</style>

<div class="size-box">大きくなるよ</div>

ブラウザ表示

6. イージングで動きに表情をつけよう

イージング（タイミング・ファンクション）とは、動きの「加速や減速」のことです。これがあることで、動きが自然に見えたり、面白く見えたりします。ずっと同じスピードで動くのではなく、最初はゆっくりで後半に速くなる、といった調整が可能です。

代表的なイージングの種類を紹介します。

ease（イーズ）： 最初と最後がゆっくり動き、中間が速くなる設定。自然な動きで一番よく使われます。
linear（リニア）： 最初から最後までずっと同じ速さで動く。規則的な動きに適しています。
ease-in（イーズイン）： ゆっくり始まって、後半にかけて速くなる。
ease-out（イーズアウト）： 速く始まって、最後にかけてゆっくり止まる。

これらは名前を書くだけで簡単に設定できます。例えば、transition: all 0.4s ease-out; と書けば、シュッと動いてふわっと止まる、洗練された動きになります。動きの好みに合わせて使い分けてみましょう。

7. 実際の適用方法！マウスホバーとの組み合わせ

トランジションが最もよく使われるのは、マウスをのせたとき（ホバーしたとき）の変化です。CSSでは「:hover」という書き方を使って、マウスがのったときのデザインを指定します。このホバーの設定と、トランジションの設定を組み合わせることで、インタラクティブなボタンが完成します。

ここで初心者が間違えやすいポイントがあります。トランジションの設定を「:hover」の方に書いてしまうと、マウスをのせたときは滑らかに動きますが、マウスを離した瞬間にパッと元の状態に戻ってしまいます。変化の行きも帰りも滑らかにするには、必ず「元の状態（:hoverがついていない方）」にトランジションの命令を書きましょう。

プログラミングの基本は、どこに命令を書けばどう動くかを理解することです。もし思い通りに動かないときは、この「書く場所」をチェックしてみてください。次のコード例では、画像の透明度を変化させる動きを作ってみましょう。


<style>
    .image-container {
        display: inline-block;
        background-color: #000;
    }
    .sample-img {
        display: block;
        /* 透明度を0.3秒で変化させる */
        transition: opacity 0.3s ease-in-out;
    }
    /* マウスがのると少し透明になる */
    .sample-img:hover {
        opacity: 0.6;
    }
</style>

<div class="image-container">
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="sample-img">
</div>

ブラウザ表示

8. 複数のプロパティを同時に設定するコツ

一度にいくつかの場所を動かしたい場合、個別に時間を設定することも可能です。例えば、「背景の色はゆっくり変えたいけど、横幅は素早く広げたい」といったこだわりを実現できます。書き方は簡単で、カンマ（,）で区切って並べるだけです。

例えば、transition: background-color 2s, width 0.5s; と書けば、背景色は2秒、幅は0.5秒という別々の時間で動き出します。これを使いこなすと、非常に複雑でリッチなアニメーションが作れるようになります。

パソコンを触ったことがない方にとって、記号のカンマなどは忘れがちですが、これがあることで「ここから別の設定ですよ」とコンピュータに伝えることができます。丁寧に入力することを心がけましょう。色と文字の位置を同時に変えるコードを見てみましょう。


<style>
    .move-btn {
        display: inline-block;
        padding: 10px 20px;
        background-color: #333;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        /* 背景色と位置を別々の時間で変化させる */
        transition: background-color 0.8s, transform 0.3s;
    }
    .move-btn:hover {
        background-color: #ff4500;
        /* 上に5ピクセル動かす */
        transform: translateY(-5px);
    }
</style>

<a href="#" class="move-btn">上に浮き上がるボタン</a>

ブラウザ表示

9. トランジションが動かないときのチェックリスト

一生懸命コードを書いても、思い通りにアニメーションしないことがあります。そんなときは、以下の3つのポイントを確認してみてください。プログラミングのトラブル解決（デバッグ）の第一歩です。

一つ目は、プロパティの綴り（つづり）が間違っていないかです。transition を trantion などと書き間違えると動きません。二つ目は、時間の単位「s」がついているかです。数字だけ書いて transition: all 1; とすると、コンピュータはそれが何秒なのかわからず、命令を無視してしまいます。

三つ目は、変化させる前と後の値が数値で表せるものかどうかです。例えば、背景色なしから画像に変更する場合などは、アニメーションできません。「赤から青」「100pxから200px」といった、数値や色で計算できる変化を指定しましょう。これらに気をつけるだけで、トラブルの多くは解決します。