【CSS】簡単なアニメーションを作成するプロパティtransition

CSSでアニメーションを作成するにはtransitionプロパティを利用する方法とanimationプロパティを利用する方法の2種類が主にありますが、最も簡単なtransitionプロパティ（トランジション効果）を利用する方法を説明します。

基本の状態

まずは動かしたい要素と、トリガーになるボタン要素を用意します。現段階ではトランジションを設定せず、ホバーすると瞬時に20%から100%の長さに変化します。

HTML

<div class="content-body"> <div class="box"></div> </div>

CSS

.content-body{ background-color:#ccc; width:100%; } .box a{ display: block; width:20%; height:75px; background-color: #999; border:1px solid #666; } .box a:hover{ width:100%; }

transitionプロパティのトリガー

transitionプロパティを起動する（トリガー）にはhoverやactiveなどの疑似クラスを利用します。

transitionに設定できるプロパティ一覧

transition-property （適用するCSS）
transition-duration （アニメーション時間）
transition-delay （遅延時間）
transition-timing-function （変化方法）

transition-propertyとtransition-duration

適用するCSSプロパティを指定します。下の例では、ホバーをしたら2秒かけて横幅を100%に変化するように指示しています。transition-propertyで変化したい場所、transition-durationで変化する時間を割り当てます。

CSS

.box a{   /*widthのみ適用*/ transition-property: width; transition-duration: 2s;   display: block; width:20%; height:75px; background-color: #999; border:1px solid #666; } .box a:hover{ width:100%; }

transition-delay

先程のCSSに、さらにtransition-delayを追加。ホバーしたら、0.5秒遅れて動作します。

CSS

.box a{   /*0.5秒遅れて適用*/ transition-delay: 0.5s;   transition-property: width; transition-duration: 2s;   display: block; width:20%; height:75px; background-color: #999; border:1px solid #666; } .box a:hover{ width:100%; }

transition-timing-function

さらに、アニメーションの中間の変化の度合いを定義します。この値は下記がメインとして使われます。

ease（※初期値スタート時とゴール時にゆっくり変化）
ease-in（スタート時はゆっくり、ゴール時は早く）
ease-out（スタート時に早く、ゴール時にゆっくり）
ease-in-out（easeよりさらに、スタート時とゴール時はゆっくり）
linear（終始一定）

ease-outを入れた例が下です。

CSS

.box a{   /*ease-in-outを適用*/ transition-timing-function: ease-out;   transition-delay: 0.5s; transition-property: width; transition-duration: 2s;   display: block; width:20%; height:75px; background-color: #999; border:1px solid #666; } .box a:hover{ width:100%; }

それぞれの動きの違い

単体だと変化の違いが分かりづらいため、並べてホバーで同時にアニメーションがスタートするようにして分かりやすくました。

transitionのショートハンド

上記設定をまとめて記述するショートハンドの書き方です。スペースを空けてそれぞれの値を入れます。

transition: transition-propertyの値　transition-durationの値　transition-delayの値　transition-timing-functionの値

わかりづらいので、それぞれを説明文にすると、

transition: 適用するCSS　アニメーション時間　遅延時間　変化方法

となります。下記が先程と同じものをショートハンドで記載した例です。

.box a{   /*ショートハンドを適用*/ transition:width 2s 0.5s ease-out;   display: block; width:20%; height:75px; background-color: #999; border:1px solid #666; } .box a:hover{ width:100%; }

transitionの初期値を利用

上記までは細かく指定した場合でしたが、基本的には初期値が設定されているので、transitionプロパティにtransition-duration（アニメーション時間のみ）の値だけで利用できます。

.box a{   /*もっともシンプルな書き方（アニメーション時間のみ）*/ transition:2s;   display: block; width:20%; height:75px; background-color: #999; border:1px solid #666; } .box a:hover{ width:100%; }