CSS transitionで作成する手軽な アニメーション 【 CSS3 HTML】


今回は、transitionというプロパティを利用して、CSSのみでアニメーションを作成する方法を紹介します。
 

ここでは、javascriptを使わずに、transitionプロパティだけで作成した簡単なアニメーションの例や作成方法、及び互換性を考えたベンダープレフィックスについて説明します。
 

もくじ

以下は本記事のもくじです。

  1. 1. transition
    1. 1-1. 概要
      1. 1-1-1. transitionなしの場合
      2. 1-1-2. transitionありの場合
    2. 1-2. transitionプロパティの説明
      1. 1-2-1. transition-property
      2. 1-2-2. transition-duration
      3. 1-2-3. transition-delay
      4. 1-2-4. transition-timing-function
      5. 1-2-5. transition
    3. 1-3. Webブラウザの互換性
      1. 1-3-1. Chrome/Safari -webkit
      2. 1-3-2. FireFox -moz
      3. 1-3-2. Opera -o
  2. 2. まとめ

 
それでは説明に移っていきます。
 

スポンサーリンク



 
 

1. transition

 

1-1. 概要

transitionプロパティは直訳すると「変化」や「遷移」です。あるHTML要素に対する時間的変化を指定することで、開始から終わりまでをアニメーションとして動作させることができます。

下記の水色のブロックにカーソルを合わせてください(スマホの方はタッチしてみてください)。

アニメ

 

3秒間で、右に伸びていって、色が水色からオレンジ色に変化します。カーソルを外すと(スマホの方は別のところにタッチすると)、元に戻っていくと思います。

:hoverを利用してカーソルが合わさった時に幅と色を3秒間で変化するように指定しています。

 

1-1-1. transitionなしの場合

まずはtransitionを指定していない時の動作を確認してみましょう。

下記の水色のブロックにカーソルを合わせてみてください。

通常

 

上記は、「:hover」を利用してカーソルが合わさった時に幅と色を変化するように指定しています。ただし、transitionで時間指定をしていないため、アニメーションのような動作をしていません。

 

■上記例のhtml

 

■上記例のcss

 

1-1-2. transitionありの場合

次に、上の例に、transitionプロパティを指定して3秒間で遷移するようにしてみます。

下記の水色の図形にカーソルを合わせてみてください。

アニメ

 

3秒間と指定することでアニメーションのような動きになっています。

 

■上記のhtml

 

■上記のcss

 

transitionについて、もうすこし詳しく見てみましょう。
 

1-2. transitionプロパティの説明

「transition」は、「transition-property」「transition-duration」「transition-delay」「transition-timing-function」で構成されます。
 

1-2-1. transition-property

「transition-property」では、変化対象のCSSプロパティを指定できます。

background-color などのように個別のプロパティを設定できますし、「all」で全プロパティを対象にすることもできます。

先ほどの例では、width(幅)とbackground-color(背景色)を指定しました。

 

1-2-2. transition-duration

「transition-duration」は、変化の開始から終了するまでの時間(秒)を指定できます。

初期値は0でアニメーションにはなりません。負の値は0扱いになります。

先ほどの例では、3s(秒)を指定しました。

 

1-2-3. transition-delay

transition-delayは先ほどの例では使いませんでしたが、変化がいつ始まるかを指定できます。

transition-delayプロパティで指定した時間が経過した後に変化が開始されます。
初期値は0で変化がすぐに開始されます。

値に負の時間を指定すると、変化はすぐに開始されます。その際、指定した時間だけさかのぼって実行を開始したような動きになります。

 

1-2-4. transition-timing-function

「transition-timing-function」で変化の仕方(例えば、一定スピードで変化、はじめゆっくりでだんだん速く変化など)を指定します。

 

以下の中から指定方法を選択できます。

  • ease(開始と終了を滑らかに)
  • linear(一定)
  • ease-in(開始がゆっくり)
  • ease-out(終了がゆっくり)
  • ease-in-out(開始と終了がゆっくり)
  • cubic-bezier(※)

※cubic-bezireはベジェ曲線を4つの変数を指定して設定する方法です。数学の世界に入るためここでは割愛します。

先ほどの例では、ease-out(終了がゆっくり)を指定しました。

 

1-2-5. transition

CSSに何行も書くのは大変なので、transitionで今までの各transitionのプロパティをまとめて指定できます。

先ほどの例の場合の場合は下記のように指定できます。

 
■CSS

または、今回の例では、allを指定しても同じ動作になります。

 

イメージ的には、background-color:xx; background-repeat:ooを「background:xx oo」のようにまとめたものと同じになります。

 

ちなみに:hoverをつけていないときにもtransitionを指定するとカーソルを合わせた時と外した時の両方でアニメーションを見せることができます(最初に示した例です。)

 

アニメ

 

 

1-3. Webブラウザの互換性

transitionというプロパティは昔から存在していたわけではなく、CSS3という比較的新しい規格のなかで生まれたため、一部の古いWebブラウザでは正常に動作しない場合があります。

特に、Internet Explororの場合はバージョン10より以前のバージョンは正常に動作しませんのでご注意ください。

Chrome、Safari、FireFox、Operaでも古いバージョンの場合は、ベンダープレフィックスという識別子を指定しないと正常に動作しない場合があります。
 

CSS3 transitionのサポートWebブラウザ

CSS3 transitionのサポートWebブラウザ

http://caniuse.com/#search=transitionより抜粋

1-3-1. Chrome/Safari -webkit

-webkit-transition(-xxxx)

 

1-3-2. FireFox -moz

-moz-transition(-xxxx)

 

1-3-3. Opera -o

-o-transition(-xxxx)

 

互換性を気にする場合はCSSにベンダープレフィックスも指定した形式で記述しておくと安定動作につながると思います。

 

 
 

スポンサーリンク



 
 

2. まとめ

まとめです。

transitionプロパティを利用することで、javascriptを利用しなくても手軽なアニメーションが作成できます。

今回は、transitionプロパティを利用したアニメーション動作の例の使い方を説明しました。

また、互換性を考えたベンダープレフィックスについて説明しました。

 

今回は以上になります。最後までご覧いただきありがとうございました。

こちらの記事もおすすめです


mail無料メルマガ

メルマガを受け取る女性

読者限定の情報やイベント情報を先行配信

読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています!登録・解除は自由です!ぜひご登録ください!