• HOME > 
  • CSS > 
  • CSSのtransitionの使い方【初心者にもわかりやすく...

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

投稿日:

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

カテゴリー記事のアイキャッチ画像
広告
広告

transitionとは?

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

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

transitionの例

カーソルを重ねてください

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

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

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

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

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

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

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

リンク先のサムネイル
CSSのセレクターとは?

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

animationとの違い

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

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

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

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

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

transitionを指定する場面

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

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

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

transitionの種類と記述の仕方

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

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

CSS

#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」が適用されます。

性質マウスを重ねると動きます
ease開始時と終了時はゆるやかになります(初期値)
ease
ease-in開始時はゆるやかに、終了時は早く変化します
ease-in
ease-out開始時は早く、終了時はゆるやかに変化します
ease-out
ease-in-outeaseよりもゆるやかに変化します
ease-in-out
linear一定の速度を保ち変化します
linear

まとめて指定する方法

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

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

CSS

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

戻るときの指定の仕方

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

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

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

CSS

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

プレビュー

マウスを重ねて離してみてください
ボタン

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

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

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

拡大縮小させる

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

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

HTML

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

CSS

.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と組み合わせれば移動をアニメーションで表示することが可能になります。

HTML

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

CSS

.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をスタートさせることが可能です。

HTML

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

CSS

#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;
}

Javascript

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による制御を組み合わせればユーザーの操作に応じて様々な動きを付けられるのでサイトをワンランクアップさせた動的なサイトにすることができます。

関連する記事

サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。
サムネイル

CSSのletter-spacingで文字間隔を設定【中央寄……

2023年01月16日
最終更新日:2023年03月10日
letter-spacingは、テキストの文字と文字との間隔を設定するためのプロパティです。文字と文字の間を狭めたり、広げたりしてバランスを整えることができます。
サムネイル

CSSのtext-emphasisの使い方【圏点(けんてん)……

2023年01月16日
最終更新日:2023年03月10日
text-emphasisは、文字を強調したいときに付け加える圏点(けんてん)を表示するプロパティです。圏点のスタイル(形状)と色を自由に設定することが可能です。
サムネイル

CSSで中国語フォントを表示させる方法【font-famil……

2022年10月28日
最終更新日:2023年03月10日
簡体字を使用するにはサイトにGoogle FontsなどのWebフォントを導入して、CSSのfont-familyプロパティでそのフォントを指定します。