プラカンブログSTAFF BLOG

2017.04.06

いい加減使いたい!CSS3アニメーション 【Transition編】

こんにちは、デザイナーのSUGIYAMAです。

CSS3にはTransitionAnimationというアニメーションを行う機能があります。
今までJavaScriptで行ってきたアニメーションはもちろん、形状を変えたりと様々なことが可能です。
またJavaScriptでDOMを書き換えるアニメーションより、スムーズに動きを表現できていると思います。
さらにCSSのみで実装できるので、記述内容も比較的少なく実装できるのもうれしいです。

今回は2つの機能の内、Transitionでのアニメーションについての説明と記述方法を紹介します。


CSS Transitionとは

プロパティに変更があった時に、一定時間でプロパティを変化させる機能です。
単純な動きのアニメーションを実装する時に利用することが多いです。


CSS Transitionを利用できるプロパティ

Transitionのプロパティは以下の4つです。サンプルも踏まえて紹介します。

紹介していくにあたり基本的に下記のコードを使用して説明します。

<div class="box"></div>

transition-property

背景色、文字のサイズなど、トランジションを適用するCSSプロパティ名を指定します。
指定したプロパティのみトランジションによりアニメーションさせますが、allにした場合すべてのプロパティに適用されます。

transition-property: all;

 

transition-property: background;

 

RUN

transition-duration

アニメーション開始から終了までの所要時間を指定するプロパティです。
デフォルトは「0s」になります。
単位は「s」と「ms」があり、「s」が秒単位、「ms」がミリ秒(千分の一秒)になります。
またカンマ(, )で区切って複数指定することも可能です。

transition-duration: 300ms;

 

transition-duration: 1000ms;

 

RUN

transition-delay

アニメーションが開始するまでの遅延時間を指定するプロパティです。
デフォルトは「0s」になります。
単位は「s」と「ms」があり、「s」が秒単位、「ms」がミリ秒(千分の一秒)になります。
またカンマ(, )で区切って複数指定することも可能です。

transition-delay: 0s;

 

transition-delay: 500ms;

 

RUN

transition-timing-function

アニメーションのイージングを指定するプロパティです。

  • transition-timing-function: ease;
  • transition-timing-function: ease-in;
  • transition-timing-function: ease-out;
  • transition-timing-function: ease-in-out;
  • transition-timing-function: linear;
  • transition-timing-function: step-start;
  • transition-timing-function: step-end;
  • transition-timing-function: steps(4, end);
  • transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

「steps(n, flag)」は n段階で変化します。flag に start を指定すると、開始直後に 1段階目の変化が発生します。end を指定すると、最初のインターバル経過後に 1段階目の変化が発生します。デフォルトは end です。

「cubic-bezier()」は任意の変化の進行割合を3次ベジェ曲線で指定することが可能です。

transition-timing-function: ease;

 

transition-timing-function: ease-in;

 

transition-timing-function: ease-out;

 

transition-timing-function: linear;

 

transition-timing-function: step-start;

 

transition-timing-function: step-end;

 

transition-timing-function: steps(4, end);

 

transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

 

RUN

「cubic-bezier()」の指定を可視化した便利サイトもたくさんありますので、利用するといいでしょう。
ちなみに私は このサイトをよく使います。


JavaScriptのtransitionEndでアニメーションのイベントを取得する

CSSのtransitionアニメーション終了時にJavaScriptを実行したいときにはtransitionEndイベントを指定します。
transitionEndイベントでは、アニメーションで変化する要素の回数だけ実行されます。
たとえば、色とサイズが変わる場合には、transitionEndイベントは、色の変化で1回、サイズの変化で1回、合計2回実行されます。
サンプルでは、横幅のサイズのみカウントするようにしています。

 

アニメーション回数: 0

RUN

$(function(){ 
	var $box = $('.countbox'); 
	var count = 1; 
	$('.box').on('webkitTransitionEnd transitionend',   function(e){ 
		if (e.originalEvent.propertyName === 'width') { 
			$box.text(count++); } 
}); 

2016年12月現在では、スマートフォンブラウザ向けの webkitTransitionEnd とPCブラウザ向けの transitionend を設定すればIE(transitionに対応した10以降)、Firefox(最新版)、Chrome(最新版)、Opera(最新版)に対応できます。


まとめ

今回はCSS Transitionについて説明しましたが、CSSにはAnimationという機能もあり、アニメーションを実装することができます。
Animationでは細かなアニメーションに向いています。用途に合わせて使い分けると良いと思います。
ただし、IE9以下では使えなかったりや、モダンブラウザでもプリフィックスをつける必要な場合もあります。
環境が整ってきているとはいえ、古いブラウザも対象ブラウザの場合は、JavaScript用も用意しておくといいでしょう。

この記事は、SUGIYAMA が書きました。