【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%;
}

それぞれの動きの違い

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

ease
ease-in
ease-out
ease-in-out
linear

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

Yuki Nakata

中田デザイン事務所 代表。
WEBデザイナー（フリー）/ WEB講師（非常勤）/ 海外販売（法人）他

お仕事のご相談はお問い合わせフォームへお願いします。