【CSSの技】CSSだけで徐々にスタイルを変化させる

CSSだけで徐々にスタイルを変化させる

JavaScript を使わず CSSだけでスタイルを徐々に変化させるには「transition-property」と「transition-duration」を使用します。

transition-property・・・変化させるプロパティ
transition-duration・・・変化にかける時間（秒、ミリ秒）

サンプルCSSコード

#henka {
     font-size: 10px;                           /*元のフォントサイズ*/
     transition-property: font-size;    /*変化させたいプロパティ指定*/
     transition-duration: 5s;               /*変化にかける時間*/
}
#henka:hover {
     font-size: 200px;    /*変化させる最終値*/
}

サンプルHTMLコード

<span id="henka">TEST</span>

＜サンプル結果＞

下の文字（TEST）の上にマウスポインタを乗せると文字が徐々に拡大され、マウスポインタを外すと徐々に元の大きさに戻ります。

TEST

備考・その他

CSSのアニメーション（animation-name、animation-duration）を使用するともっと複雑に変化させることができます。

END