• CSS

CSSのtransitionの使い方【初心者にもわかりやすく解説】

投稿日:2022年02月18日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

transitionとは？

CSSのtransitionは、要素が指定したスタイルの状態へとどのくらいの時間をかけて変化するかを指定することができるプロパティです。

下のボタンにマウスのカーソルを重ねてみてください。白いボタンが徐々に赤く変わっていきます。

background:redというスタイルが完全に反映されるまで1秒掛かるようにtransitionで設定したことでこのように表示されています。

簡単にアニメーション効果を付けられる

本来であれば即時反映されるスタイルをあえて時間を掛けて反映するように指定することで、変化の過程をアニメーションとして見せることが可能です。

先程のbackground以外にも、widthであれば幅の伸縮をアニメーションさせられますし、opacityやvisibilityを合わせれば表示非表示をアニメーションで見せることができます。

マウスホバーなどのきっかけに合わせて使う

transitionはCSSの読み込みが完了したタイミングから変化がスタートするので、ページ下部にある要素に指定した場合、スクロールしてその要素が見えるころには変化は完了してしまっており、せっかくして設定したアニメーションを見てもらうことができません。

なので上記の例のように「:hover」（マウスホバー）などと合わせて記述して、ユーザーの特定の操作をきっかけにアニメーションを開始させることがほとんどです。

「:hover」についてはこちらで説明しています。

CSSのセレクターとは？

CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。セレクタ―を使ってスタイルを指定することで、同じスタイルを使いまわしたり一部分にだけ違うスタイルを適用させることが可能になります。...【もっと読む】

animationとの違い

CSSにはtransitionと似たようにアニメーションを表現できる「animation」（@keyframes）というプロパティが存在します。

このプロパティとの違いはtransitionでは変化の途中の動きを指定することはできないという点です。

例えば「1秒経過した時は赤色、2秒経過したら青色、最後は緑色になる」というような処理はtransitionではできないので@keyframesを使って時間経過で区切った設定を行う必要があります。

またtransitionは繰り返し変化させ続けることはできません。マウスホバーをきっかけにする場合であれば、一度カーソルを離してから再度マウスホバーすればもう一度時間を掛けて変化します。

transitionは細かい動きは気にせずに簡単にアニメーションを表示したいときに使うと良いでしょう。

transitionを指定する場面

transitionはボタンのマウスホバーや画像の表示、アコーディオンメニューなどWEBサイトの様々な箇所での動き付けに使用されています。

animationプロパティよりも手軽に使用できるので、動きのあるサイトを作るときに活躍します。

また大掛かりなものとしては、Javascriptの知識も必要になるもののスライドショーなども作ることが可能です。

transitionの種類と記述の仕方

transitionには4つプロパティがあり、それらを組み合わせて指定します。

基本の記述は下記のようになります。

#first_sample:hover{
    background: #d40000;
    transition-property:background;
    transition-duration:1s;
    transition-delay:.5s;
    transition-timing-function:linear;
}

ここから各プロパティについて説明していきます。

transition-propertyプロパティ

「transition-property」は、変化対象のプロパティの指定に使用します。

省略することができ、その場合は初期値である「all」が適用されて全てのプロパティが対象になります。

transition-durationプロパティ

「transition-duration」は変化を開始してから完了するまでの時間を指定するプロパティです。

別の言い方をするならば「どのくらいの時間を掛けて変化させるか」ということになります。

「s」（秒）もしくは、「ms」（ミリ秒）で指定します。（0.5sや.5sというような書き方も可能です。）

下記の例のように時間と変化の大きさによって動きが異なるので注意してください。

transition-delayプロパティ

「transition-delay」は変化を始めるタイミングを遅らせるプロパティです。

マウスホバーを例にするならば、「対象がマウスホバーされてから何秒後に変化をスタートするか」という時間を指定するときに使います。

transition-durationと同様に「s」（秒）もしくは、「ms」（ミリ秒）で指定します。

省略することが可能で、その場合は即変化がスタートします。

transition-timing-functionプロパティ

「transition-timing-function」は変化の緩急を指定するプロパティです。

「最初はゆっくり変化を開始して、最後は素早く変化を終える」というような動きに変更することができます。

省略することが可能で、その場合は初期値である「ease」が適用されます。

まとめて指定する方法

「transition」プロパティを使えば、上記の4つのプロパティを一行にまとめて指定することが可能です。

下記の例のように半角スペースで区切って記述します。省略できるものは記述しなければ初期値が適用され、順序に決まりはありません。（ただし、durationはdelayは先に記述した方がdelayになります）

.sample:hover{
    transition:backgroud .5s 1s linear;
}

戻るときの指定の仕方

これまでの例では、マウスホバーにはtransitionを指定したのでゆるやかに変化しますが、マウスが離れた途端に急にもとのスタイルに戻ります。

これは好みにもよりますが、元に戻るときもゆるやかにアニメーションさせたい場面もあるでしょう。

そういった場合には元のセレクタ―に対してtransitionを指定しておきます。

#return.sample{
    transition:all .5s 1s ease;
}
#return.sample:hover{
    transition:all .5s 1s linear;
}

transformと組み合わせて使う方法

「transform」プロパティは要素を拡大縮小したり、移動させたいときに使います。

transitionを一緒に指定することで変型や移動をアニメーションのように見せることが可能です。

拡大縮小させる

「transform:scale」を使うことで、要素の大きさを変更することができます。

transitionを組み合わせればマウスホバーで拡大するといった効果を見せることが可能です。

<div id="tf_s" class="sample_tf">拡大縮小</div>

.sample_tf{
    width:100px;
    height:100px;
    background: #333;
    color:#fff;
    padding:10px;
    margin:10px;
    transition:all .5s ease-in;
}
#tf_s:hover{
    transform:scale(0.5);
    transition:all .5s ease-in;
}

transform:scale(0.5)により元のサイズの半分に縮小されます。

移動させる

「transform:translate」を使うことで、要素を移動させることができます。

transitionと組み合わせれば移動をアニメーションで表示することが可能になります。

<div id="tf_tl" class="sample_tf">移動</div>

.sample_tf{
    width:100px;
    height:100px;
    background: #333;
    color:#fff;
    padding:10px;
    margin:10px;
    transition:all .5s ease-in;
}
#tf_tl:hover{
    transform:translateX(100px);
    transition:all 1s ease-in;
}

transform:translateX(100px)により横方向へ100px移動されます。

Javascriptと組み合わせて使う方法

CSSのみでは、ほとんどマウスホバーしかtransitionのきっかけを指定することはできませんが、Javascriptを使えばクリックなどをきっかけにtransitionをスタートさせることが可能です。

<div id="sample_jq_area">
    <div id="sample_jq">変化する要素</div>
    <button id="sample_jq_btn">クリックしてください</button>
</div>

#sample_jq{/*元の状態*/
    width:200px;
    height: 100px;
    background:#999;
    border:solid 3px #666;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    margin: 10px;
    transition:all 1s ease-in;
}
#sample_jq.action{/*クラスが付与された時*/
    width:100%;
    background: #333;
    transition:all 1s ease-in;
}
#sample_jq_btn{/*ボタン*/
    width:100%;
    max-width: 300px;
    background: #d40000;
    border-radius: 5px;
    border:none;
    color:#fff;
    font-weight: bold;
    padding:10px;
    margin:10px;
    transition:all .5s ease-in;
}

var button = document.getElementById("sample_jq_btn");
var target = document.getElementById("sample_jq");
    button.addEventListener("click",function(){/*ボタンがクリックされたら*/
        target.classList.toggle("action");/*クラスを付け外しする*/
    },false);

コードの仕組みを説明すると、まずユーザーが特定の要素をクリックしたことを取得し、それをきっかけに変化させたい要素にクラスを付与します。そのクラスをセレクタ―としてtransitionを設定しておくことで動きを制御します。もう一度クリックするとクラスが取り除かれ、元に戻るという仕組みです。

まとめ

transitionプロパティを使うことで手軽にアニメーションが表現可能です。特に、CSSのtransformプロパティによる変型や移動とJavascriptによる制御を組み合わせればユーザーの操作に応じて様々な動きを付けられるのでサイトをワンランクアップさせた動的なサイトにすることができます。