【CSS】【Transiton】の使用方法について

はじめに

この記事は【CSS】【Transiton】の使用方法についての備忘録である。

【Transiton】とは

Transiton プロパティは、CSSで再現する動きの早さを簡単に設定することができる。
例えば、ボタンにマウスを乗せたとき、色がゆっくりと変わる効果を加えられる。
animation プロパティほど細かい設定は出来ないが、Transiton プロパティは簡単に使えるのでホバー時の動きを制御するのにおすすめである。

【Transition】と【Animation】の違い

Transiton プロパティはある状態から別の状態への変化を滑らかにするのに対し、
animation プロパティは連続したアニメーションを作成するためのものである。

Transiton プロパティは主に単純な効果に適しており、
animation プロパティは、より複雑な動きを表現する際に力を発揮する。

【Transition】の記述方法

Transiton プロパティは以下のように記述する

<div class="button">
<a href="#">ホバーで色が変わります</a>
</div>

.button a {
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
    padding: 15px;
    color: #ffffff;
    background-color: #1A60BF;
    transition: all 0.5s 0s ease; /* transitionの記述 */
}
.button a:hover {
    color: #1A60BF;
    background-color: #D0E2FB;
}

【Transiton】の種類・指定の方法

Transiton プロパティは4つの種類がある。

Transiton プロパティ	詳細
transition-duration	変化の秒数
transition-delay	変化が開始するまでの秒数
transition-property	変化させたいプロパティ
transition-timing-function	変化の進行度

transition-duration

アニメーション開始から終了までを定義する。
単位はs(秒)もしくはms(ミリ秒)となる。

transition-delay

アニメーションが開始するまでの遅延時間を定義する。
単位は同様にs(秒)もしくはms(ミリ秒)となる。

transition-property

アニメ―ションの適用プロパティを定義する。
適用プロパティをcolorにのみ設定すると、下記のようになります。

変化する全てのプロパティに適用する場合はallを記述する。
また transition-property の記述を省略した場合はallが適用される。

.button a {
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
    padding: 15px;
    color: #ffffff;
    background-color: #1A60BF;
    transition-property: color; /* アニメーションをcolorのプロパティのみ適用 */
    transition-duration: 0.5s;
}
.button a:hover {
    color: #1A60BF;
    background-color: #D0E2FB;
}

transition-timing-function

アニメーションが開始され終了するまでにおける変化の進行度合いを定義する。
値は下記の6種類ある。

値	詳細
ease	開始時と終了時にはゆっくり変化（初期値）
ease-in	開始時はゆっくり変化し、終了時は早く変化
ease-out	開始時に早く、終了時にゆっくり変化
ease-in-out	easeよりさらに、開始時と終了時はゆっくり変化
linear	速度が変わることなく一定に変化
cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)	変化の度合いをベジェ曲線により任意で指定

Transiton

上記4つのプロパティをまとめて記述できるのが、Transiton プロパティ である。
それぞれ半角スペースで区切って入力することで定義できる

.example {
    transition: all   /* transition-propertyの値 */ 
                0.5s  /* transition-durationの値 */ 
                0s    /* transition-delayの値 */ 
                esae; /* transition-timing-functionの値 */ 
}