プラカンブログSTAFF BLOG

2017.04.11

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

こんにちは、デザイナーのSUGIYAMAです。
今回はAnimationについての簡単な説明と、記述方法などをご紹介します。

CSS3にはTransitionAnimationという機能があり、それらを使用してアニメーションを実装しています。
個人的にJavaScriptでのアニメーションより、スムーズに動きを表現できていると思います。
またCSSのみで実装できるので、記述内容も比較的少なく実装できるのもうれしいです。

※ちなみに↑の画像はアニメーションGIFです…(´・ω・`)


CSS Animationとは

キーフレームアニメーションを適用できる機能です。
細かい動きのアニメーションを実装する時に利用することが多いです。

@keyframes

@keyframes は、アニメーション中に到達すべきポイントであるキーフレーム (通過点) を明示することで、CSS animation の流れの中間地点をページ作者が制御することを可能にします。
引用:@keyframes – CSS | MDN

アニメーションの最初から最後までの間のポイントで要素の位置や形、色を指定することが可能です。
値は「from」「to」「パーセンテージ(%)」があります。

キーフレーム無

キーフレーム有

RUN

@keyframes 任意の識別名 { 
	from { top: 0; left: 0; } 
	to { top: 100px; left: 100%; }
} 
		
@keyframes 任意の識別名 { 
	0% { top: 0; left: 0; } 
	30% { top: 50px; } 
	68%, 72% { left: 50px; } 
	100% { top: 100px; left: 100%; } 
}

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

animation-name

要素に適用するキーフレームアニメーションを指定するプロパティです。
まずこれを指定しない限りアニメーションは実行されませんので必ず必要です。

.element {
	animation-name: animated;
}
animation-duration

アニメーション開始から終了までの所要時間を指定するプロパティです。
単位は「s」と「ms」があり、「s」が秒単位、「ms」がミリ秒(千分の一秒)になります。
負の値は 0 として扱われます。

animation-duration: 2s;

 

animation-duration: 4s;

 

RUN

animation-delay

アニメーションが開始するまでの遅延時間を指定するプロパティです。
デフォルトは「0s」になります。
単位は「s」と「ms」があり、「s」が秒単位、「ms」がミリ秒(千分の一秒)になります。
遅延時間に負の値を指定すると、アニメーションは直ちに開始されます。しかし、アニメーションが途中から始まるように見えます。

animation-delay: 0s;

 

animation-delay: 500ms;

 

RUN

animation-iteration-count

アニメーションのループ回数を指定するプロパティです。
infiniteを指定すると無限ループになります。

animation-iteration-count: 1;

 

animation-iteration-count: 3;

 

RUN

animation-timing-function

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

  • animation-timing-function: ease;
  • animation-timing-function: ease-in;
  • animation-timing-function: ease-out;
  • animation-timing-function: ease-in-out;
  • animation-timing-function: linear;
  • animation-timing-function: step-start;
  • animation-timing-function: step-end;
  • animation-timing-function: steps(4, end);
  • animation-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次ベジェ曲線で指定することが可能です。

animation-timing-function: ease;

 

animation-timing-function: ease-in;

 

animation-timing-function: ease-out;

 

animation-timing-function: linear;

 

animation-timing-function: step-start;

 

animation-timing-function: step-end;

 

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

 

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

 

RUN

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

animation-direction

アニメーションの再生方向を指定するプロパティです。

animation-direction: normal;

 

animation-direction: reverse;

 

animation-direction: alternate;

 

animation-direction: alternate-reverse;

 

RUN

animation-direction: normal;

通常再生(0% → 100%)。ループの場合、再び始め(0%)から再生。

animation-direction: reverse;

逆再生(100% → 0%)。ループの場合、再び逆再生の始め(100%)から再生。

animation-direction: alternate;

通常再生するが、ループの場合
通常再生(0% → 100%) → 逆再生(100% → 0%) → 通常再生(0% → 100%) → 逆再生(100% → 0%)
といった繰り返し順で再生。

animation-direction: alternate-reverse;

逆再生するが、ループの場合
逆再生(100% → 0%) → 通常再生(0% → 100%) → 逆再生(100% → 0%) → 通常再生(0% → 100%)
といった繰り返し順で再生。

animation-fill-mode

キーフレームアニメーションで指定したプロパティをアニメーション開始前、終了後に適用するかどうかを指定するプロパティです。

animation-fill-mode: none;

 

animation-fill-mode: forwards;

 

animation-fill-mode: backwards;

 

animation-fill-mode: both;

 

RUN

animation-fill-mode: none;

何も適用されません。

animation-fill-mode: forwards;

アニメーションの適用先は、アニメーションの最後に適用されたキーフレームの指定によって計算された値を維持します。これは通常、’100%’ または ‘to’ キーフレームになります。ただし、animation-direction の値が ‘alternate’ で、かつ animation-iteration-count に偶数が設定されている場合は ‘0%’ または ‘from’ キーフレームになります。

animation-fill-mode: backwards;

アニメーションの適用先に、’0%’ または ‘from’ キーフレームで定義された値を即座に適用して、animation-delay プロパティで指定した時間の間もその状態を維持します。

animation-fill-mode: both;

forwards と backwards の両方の規定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。

animation-play-state

アニメーションを再生中に一時停止にするプロパティです。

 

Play


javascriptでkeyframesアニメーションの始まりと終わりのイベントを取得する

CSSのtransitionアニメーションの開始時と終了時にjavascriptを実行したいときにはanimationStart、animationEndイベントを指定します。

$(function(){ 
	var $box01 = $('.countbox01'); 
	var $box02 = $('.countbox02'); 
	var count01 = 0; 
	var count02 = 0; 
			
	//アニメーション開始時 
	$('.box01').on('webkitAnimationStart mozAnimationStart msAnimationStart oAnimationStart animationStart', function(){
		$box01.text(count01++);
	}); 
			
	//アニメーション終了時 
	$('.box02').on('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function(){
		$box02.text(count02++);
	}); 
});
 

アニメーション開始回数: 0

 

アニメーション終了回数: 0

RUN

webkit、mozilla、ie、operaとそれぞれプリフィックスを付けています。
ただし、このanimationStartとanimationEndはIE9以下には対応していません。


まとめ

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

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