CSS transitionの使い方を覚える

CSSのtransitionはHTMLでマークアップした要素に「カーソルを重ねる」といった動作をキッカケに、始点と終点の2点間のデザインをアニメーションで変化させることができるCSSプロパティです。

CSSでどのようにtransitionを記述するとアニメーションで変化させることができるのか？CSSのtransitionの使い方を覚えたい方の参考やヒントになればと思います。

CSSでtransitionの使い方

CSSでtransitionの使い方は、最初にtransition:1sを記述して、transitionに指定されている初期値のプロパティの種類を検証しながら理解すると、transitionの使い方が基本的なことから覚えやすくなります。

まずHTMLでdiv要素を作りCSSでホバーさせるときにCSSのtransitionで背景色をアニメーションで変化させます。

<div class="transition-box">TransitionBox</div>

上のHTML記述のようにtransition-boxというクラスを付与したdiv要素を作成します。

.transition-box{
    transition: 1s;
}
.transition-box:hover{
    background-color: #cddc39;
}

作成したdiv要素は、付与したクラス名を使いCSSで「.transition-box」のクラスセレクタと「.transition-box:hover」の疑似クラスの2つのセレクタを作成します。

そして

• .transition-boxのクラスセレクタにtransition: 1s;を指定。
• .transition-box:hoverの疑似クラスにはbackground-colorで背景色を指定。

記述後にtransition: 1s;を指定したdiv要素がマークアップされているHTMLファイルをブラウザで表示し、マウスでtransition-boxにカーソルを重ねると、文字しか表示していなかったdiv要素はアニメーションで黄色の背景に1秒かけて変化します。

次にtransition-boxの要素を適用したCSSのtransitionの記述をブラウザ(GoogleChrome)の検証ツールで確認します。

transition-boxの要素にスタイルを適用している.transition-boxセレクタ内taransition:1sを検証ツールで確認すると右矢印が表示してるのでクリックします。するとtransitionプロパティに使用されている個別ごとのプロパティの種類が確認できます。

• transition-property: all;
• transition-duration: 1s;
• transition-timing-function: ease;
• transition-delay: 0s;

transition:1sを指定しただけで上記のtransitionプロパティの種類が適用されているのが検証して確認できますが、これらの各プロパティの値は、CSSのtransitionプロパティでまとめて指定することができます。

つまりCSSのtransitionプロパティは一括指定をする使い方をします。

また、tansition-duration: 1sは今回「1s」を指定しているので初期値ではありませんが、他のtansitionプロパティは一括指定に記述を加えていないので初期値が与えれれています。tansition-durationの初期値は0sです。

せっかくCSSのtransitionプロパティの種類があることが分かったので、それぞれのtransitionプロパティがどんな役割をしているのかを1つずつ覚えてtransitionの使い方に役立てたいです。

transition-durationで再生時間を設定

CSSのtransition-durationはアニメーションの再生時間を設定するためのプロパティです。transition-durationの値には再生時間を1sのようにsを付けて再生秒数を指定する使い方をします。初期値は0sです。

.transition-box{
    transition-duration: 1s; /*再生時間*/
}
.transition-box:hover{
    background-color: #cddc39;
}

transitionプロパティで一括指定する場合はtransition: 1s;と記述する使い方をすることで、transition-duration: 1sを設定しているのと同じ使い方をしていることになります。

.transition-box{
    transition-duration: 3s; /*再生時間*/
    padding: 20px;
    background-color: #48d9cb; /*変化前の背景色*/
}
.transition-box:hover{
    background-color: #cddc39; /*変化後の背景色*/
}

例えば背景色をホバーで変化させるときにtransition-duration:3sを指定して再生時間を設定した場合は、始点(transition-box)から終点(transition-box:hover)まで3秒の再生時間をかけたアニメーションの動作で背景色が変化します。

transition-propertyがプロパティ指定

CSSのtransition-propertyはアニメーションで変化する対象のプロパティを指定するために使用するcssプロパティです。初期値はallです。

前述したCSSのtransition一括指定でtransition: 1sを記述した使い方を思い出してみます。

.transition-box{
    transition: 1s;
    /*初期値でtransition: all;が適用されている*/
}
.transition-box:hover{
    background-color: #cddc39;
}

値に再生時間の1sしか指定していないのでtransition-propertyは初期値のallが適用されます。このtransition-propertyの初期値allは、始点と終点の要素間でアニメーションで変化させるプロパティ全てを対象にする使い方ができます。

例えば、アニメーション変化前の要素にtransition-property:all;の指定とミントグリーンの背景色を指定します。

.transition-box{
    transition-duration: 3s;
    transition-property: all;
    padding: 20px;
    border: 5px solid #333;
    background-color: #48d9cb;
}
.transition-box:hover{
    background-color: #cddc39;
    font-size: 20px;
}

そしてアニメーション変化後の要素には、背景色を黄色に、フォントサイズを20pxで指定します。

すると、transition-property:all;がアニメーションで変化させるプロパティ全てを対象にするため、セレクタ内に指定しているbackground-colorプロパティとfont-sizeプロパティのどちらもtransition-propertyの対象になりアニメーションで変化します。

transition-property:allではなく、個別のプロパティを指定する使い方もできます。

.transition-box{
    transition-duration: 3s;
    transition-property: font-size; /*フォントサイズのみをアニメーションの対象にする*/
    padding: 20px;
    border: 5px solid #333;
    background-color: #48d9cb;
}
.transition-box:hover{
    background-color: #cddc39;
    font-size: 20px;
}

transition-propertyの値に個別に変化させたいcssプロパティ名を指定します。例えばフォントサイズのみをアニメーションで変化させるならtransition-property: font-size;と指定します。

これによりtransitionのアニメーションでフォントサイズ20pxのみが3秒かけて変化します。背景色はtransitionが適用されずに、ホバーでシュッと変化するだけになります。

CSSのtransition一括指定でtransition-propertyを指定する場合は値を半角スペースを空けて指定します。

transition: 3s font-size;

一括指定したtransition: 3s font-size;の要素を検証ツールで確認すると、transition-property: font-sizeが適用されているのが分かるので覚えやすくなるかと思います。

transition-timing-functionはイージング

CSSのtransition-timing-functionは、始点と終点の間の再生速度を調節することができます。この調節を「補間」や「イージング」と呼び、どのように変化させるかはベジェ曲線で表します。

transition-timing-functionの使い方は値に再生速度の変化パターンを指定します。

transition-timing-function: ease;

上記のtransition-timing-functionの値ではeaseを指定していますが、easeはtransitionのアニメーションの変化速度が「最初と最後を滑らかに再生」するキーワード指定です。

easeも含めて主要な変化のパターンは以下のキーワードで指定できるようになっており、より細かく調節したい場合にはcubic-bezier()関数でベジェ曲線のP1とP2の座標を指定します。

transition-timing-functionを指定しなかった場合には「ease」の設定が初期値で適用されます。

またtransitionの一括指定でtransition-timing-functionを記述する場合は値を半角スペースを空けて指定します。

transition: 1s all ease;

恒例になってきてると勝手に思い込んでる検証ツールでtransition-timing-functionを確認します。

検証ツールがGoogleのChromeの場合です。要素に適用された一括指定のtrasitionでtransition-timing-functionの値easeが指定されていますが、easeの値の左横にクネクネって曲線を描いているアイコンがあるのでクリック。

するとtransition-timing-functionの値に指定したeaseのベジェ曲線とその動きが確認できるのですね。

確認するだけでなくピンクの点を操作するとtransitionのアニメーション再生速度をcubic-bezierで細かく設定する使い方ができるので、ベジェ曲線とかイージングについて覚えきれない方(私)には役立ちます。

transition-delayが再生時間を遅らせる

CSSのtrandition-delayプロパティは、指定した時間の分だけアニメーションの再生開始を遅らせることができます。例えば再生時間を5秒遅らせる場合、transitionの一括指定では「1s 5s」と指定します。

transition: 1s 5s all ease;

なお、transitionプロパティの各値は順不同で指定する使い方ができますが、一括指定で再生時間とdelay(ディレイ)を記述するときは、再生時間の指定を先に記述する必要があります。

transition-delayでアニメーションの再生時間を個別に指定する場合

.transition-box{
    transition-delay: 5s;

padding: 20px;
    border: 5px solid #333;
    background-color: #48d9cb;
}
.transition-box:hover{
    background-color: #cddc39;
}

アニメーションの変化前の要素のセレクタにtransition-delay: 5s;のように記述すると5秒再生時間が遅れてtransition-box:hoverに指定の背景色がホバーします。

transition-duration: 3s;
transition-delay: 5s;
transition-property: background-color;
transition-timing-function: liner;

個別にtransition-delayで再生時間を遅らせた後のtransitionの変化をコントロールしたいときには、transitionの個別プロパティを使用して、transition-durationで再生速度の設定やtransition-propertyで特定のプロパティのみに適用するなど組み合わせた使い方をします。

CSSのtransitionで複数指定をする場合

CSSのtransitionで複数の設定を指定する場合の使い方です。プロパティごとに異なる設定をしてアニメーションで変化させる使い方になるかと思います。

CSSのtransitionで複数指定をする場合、設定をカンマで区切って指定します。

transition:border 2s ease 0s,background-color 1s ease-out 2s,color 1s ease-in 1s;

例えば上記のCSSコードの場合、複数の指定は、transitionの一括指定で3つのプロパティ「border」「background-color」「color」に対して、それぞれ異なる設定の変化でアニメーションするようにしています。

See the Pen
transition by @shu (@shua01cdfbae5)
on CodePen.

CodePenにtransitionで複数の設定を指定したボタンもどきを作成してみました。要素にontouchstart属性を使っているのでスマホのタッチ操作でもアニメーションが確認できるかと思います。アニメーション後はRerunボタンでアニメーション前に戻ります。

CSSでtransitionの使い方は以上です。