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

Yuki Nakata

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

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