HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用70.CSSアニメーション(Keyframe Animation)

      2019/10/31   hatano

Keyframe Animationとは

transtionプロパティより、高度なアニメーションの設定が可能になります。
Keyframe Animationは、再生に関する設定(animation)とキーフレーム(@keyframes)を組み合わせて利用します。
Internet Explorer10以上。Android Browser5以上であれば、すべて対応しています。
この章でのサンプルは、ベンダープレフィックスは付与していません。必要に応じてベンダープレフィックスを付与してください。

※Internet Explorer10以上から対応
※ベンダープレフィックスの対応は下記の通りです。
-webkit- … Android Browse4~4.4.4で必要(5以降不要)

CSS Animationの各ブラウザの対応状況
Can I use -CSS Animation-

下記は、矩形エリアをホバーまたはタップすると、丸が移動するサンプルです。


<div class="animation">
	<div></div>
</div>


.animation{
	width: 200px;
	height: 200px;
	margin: auto;
	background-color: #ddd;
}
.animation div{
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: #333;
}
.animation:hover div{
	animation-name: move;
	animation-duration: 4s;
	animation-timing-function: linear;
}
@keyframes move{
	25%{
		transform: translateX(180px);
	}
	50%{
		transform: translateX(180px) translateY(180px);
	}
	75%{
		transform: translateX(0px) translateY(180px);
	}
	100%{
		transform: translateX(0px) translateY(0px);
	}
}

transitionプロパティとの違い

Keyframe Animationは、下記の点でtransitionより優位な点があります。

  • :hoverなどの疑似クラス以外でも、アニメーションのトリガー指定ができる。
    例えばページを開いたときに即実行させることもできる。
  • 時間軸で実行するプロパティを自由に指定、切り替えるができる。
  • 無限の繰り返し、再生順序の入れ替えができる。

animation-name

指定した要素に使うアニメーション名の指定。
animation-nameの名前と@keyframesの名前を同じにすることで連携させます。
名前をカンマで区切ることで複数の@keyframesと連携が可能。


.selector{
	animation-name: move;
	animation-name: move1, movie2;
}

命名ルール

  • 英数字が利用できる。大文字小文字は区別しない。
  • 記号は、ハイフン( - )、アンダースコア( _ )のみ。
  • 名前の先頭に、ハイフンは指定可。
  • 数字、アンダースコアは、名前の先頭に指定できない。
  • 記号は連続で指定もできるが、名前の先頭はハイフンは1つのみ。
  • 名前に、none、unset、initial、inherit、は指定できない。

/* 指定可能な名前 */
.selector{
	animation-name: move;
	animation-name: move1;
	animation-name: move-name;
	animation-name: move_name;
	animation-name: -move;
	animation-name: move--name;
	animation-name: move__name;
}


/* 指定不可な名前 */
.selector{
	animation-name: 1move; /* 先頭が数字 */
	animation-name: _move1; /* 先頭がアンダースコア */
	animation-name: --move; /* 先頭がダブルハイフン */
	animation-name: *move; /* アスタリスクは使えない */
	animation-name: move/name; /* スラッシュは使えない */
	animation-name: none; /* noneは使えない */
}

animation-duration

アニメーションの開始から終了までの総時間を指定するプロパティ。
値は整数または、浮動小数で指定します。
カンマで区切ることで複数指定が可能で、animation-nameの順番で連携します。
初期値は0s。

  • s…1秒は1s。0.5秒は0.5s。
  • ms…ミリ秒。1秒は1000ms。0.5秒は500ms。

.selector{
	animation-duration: 0.4s;
	animation-duration: 0.4s, 0.6s;
}

animation-timing-function

加速度(イージング)を指定するプロパティ。値は下記の通りです。
カンマで区切ることで複数指定が可能で、animation-nameの順番で連携します。

  • ease(初期値)…開始時と終了時は緩やか。
  • ease-in-out…開始時と終了時は、easeより緩やかに変化。
  • ease-in…開始時は緩やか、終了に近づくと早く変化。
  • ease-out…開始時は早く変化、終了時は緩やかに変化。
  • linear…一定の速度。

下記は、グレーエリアをホバーまたはタップすると、移動するサンプルです。
※iOS Safaraiではタップで処理を実行する場合、ontouchstart=""が必要です。


<ul class="easing" ontouchstart="">
	<li class="ease">ease</li>
	<li class="ease-in-out">ease-in-out</li>
	<li class="ease-in">ease-in</li>
	<li class="ease-out">ease-out</li>
	<li class="linear">linear</li>
</ul>


.easing{
	width: 300px;
	background-color: #333;
}
.easing li{
	width: 100px;
	height: 30px;
	line-height: 30px;
	margin-bottom: 2px;
	padding-left: 2px;
	background-color: #ddd;
	font-size: 14px;
}
.easing:hover li{
	animation-duration: 2s;
	animation-fill-mode: forwards;
}
.easing:hover .ease{
	animation-name: move1;
	animation-timing-function: ease;
}
.easing:hover .ease-in-out{
	animation-name: move2;
	animation-timing-function: ease-in-out;
}
.easing:hover .ease-in{
	animation-name: move3;
	animation-timing-function: ease-in;
}
.easing:hover .ease-out{
	animation-name: move4;
	animation-timing-function: ease-out;
}
.easing:hover .linear{
	animation-name: move5;
	animation-timing-function: linear;
}
@keyframes move1{
	100%{ transform: translateX(200px); }
}
@keyframes move2{
	100%{ transform: translateX(200px); }
}
@keyframes move3{
	100%{ transform: translateX(200px); }
}
@keyframes move4{
	100%{ transform: translateX(200px); }
}
@keyframes move5{
	100%{ transform: translateX(200px); }
}

特殊な値で、段階的に変化させるsteps()があります。コマ送りのアニメーション(紙芝居や信号機の変化のような場合)に向いています。
steps(整数, start または end)

  • 第1引数…整数で指定。指定した数の段階で変化。
  • 第2引数…start または end を指定。
    • start:アニメーション開始時から変化。
      2 -> 3
    • end:アニメーション終了時に変化。
      1 -> 2 -> 3

詳細にイージングの調整を行う場合は、cubic-bezier()を使用します。
cubic-bezier()は、変化の度合いを3次ベジェ曲線で指定します。
cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)

下記は、cubic-bezier()をWEB上でシュミレーションできるサイトです。

animation-delay

指定した時間までアニメーションを開始させないプロパティ。開始のタイミングをずらす場合に利用します。
値は整数または、浮動小数で指定します。
カンマで区切ることで複数指定が可能。animation-nameプロパティの順序と連動します。
初期値は0s。

  • s…1秒は1s。0.5秒は0.5s。
  • ms…ミリ秒。1秒は1000ms。0.5秒は500ms。

animation-iteration-count

アニメーションを繰り返す回数を指定するプロパティ。
値は整数またはinfiniteで指定します。
初期値は1。infiniteを指定した場合は、無限に繰り返します。
カンマで区切ることで複数指定が可能で、animation-nameの順番で連携します。

animation-direction

再生方向を指定するプロパティ。
カンマで区切ることで複数指定が可能で、animation-nameの順番で連携します。

  • normal(初期値)…順方向の再生。
    0% ~ 100%
  • reverse…逆方向の再生。
    100% ~ 0%
  • alternate…順方向、逆方向の再生を交互に繰り返す。
    0% ~ 100% ~ 0% ~ …
  • alternate-reverse…逆方向、順方向の再生を交互に繰り返す。
    100% ~ 0% ~ 100% ~ …

animation-fill-mode

開始前、終了後のスタイルを指定するプロパティ。
カンマで区切ることで複数指定が可能で、animation-nameの順番で連携します。

  • none(初期値)
    元のスタイルから始まり、元のスタイルに戻る。
    元のスタイル -> 0% ~ 100% -> 元のスタイル
  • forwards
    元のスタイルから開始し、再生後、最後のキーフレーム(100% または to)で止まる。
    元のスタイル -> 0% ~ 100%
  • backwards
    開始時、元のスタイルは適用されず、最初のキーフレーム(0% または from)から開始。
    再生後、元のスタイルに戻る。
    0% ~ 100% -> 元のスタイル
  • both
    最初のキーフレーム(0% または from)から開始。最後のキーフレーム(100% または to)で止まる。
    元のスタイルは適用されない。
    0% ~ 100%

	@charset "UTF-8";
	*{
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	
	div{
		width: 100px;
		height: 100px;
		background-color: #333;
		animation-name: move;
		animation-duration: 3s;
		animation-delay: 1s;
		animation-fill-mode: none;
	}
	
	@keyframes move{
		from{
			background-color: #f00;
			transform: translateX(100px);
		}
		to{
			ackground-color: #00f;
			transform: translateX(300px);
		}
	}
	

animation-play-state

アニメーションの再生・停止を指定するプロパティ。
クリックなどhover以外のイベントでの実行は、JavaScriptを利用します。

  • running(初期値)…実行
  • paused…停止

<div id="move"></div>
<p id="btn">停止</p>


*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
div{
	width: 100px;
	height: 100px;
	background-color: #333;
	animation-name: move;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-fill-mode: both;
}

@keyframes move{
	to{
		transform: translateX(600px);
	}
}


var btn = document.getElementById("btn");
var move = document.getElementById("move");
btn.onclick= function(){
	if(move.style.animationPlayState == "running"){
		move.style.animationPlayState = "paused";
	}else{
		move.style.animationPlayState = "running";
	}
}

animation

ショートハンドのプロパティ。各値は半角スペースで区切ります。複数指定する場合は各グループをカンマで区切ります。
※animation-delayの指定をする場合は、animation-durationの指定が必須です。

初期値は、下記の通りです。

  • animation-name: none;
  • animation-duration: 0s;
  • animation-timing-function: ease;
  • animation-delay: 0s;
  • animation-iteration-count: 1;
  • animation-direction: normal;
  • animation-fill-mode: none;
  • animation-play-state: running;

@keyframes

時間軸の指定と実行するプロパティの指定。時間軸は、キーワードまたは%で指定します。
%で指定する場合は、0%~100%間で指定します。
キーワードと%を混在した指定も可能です。
開始または終了は省略することも可能です。
アニメーション名は、animation-nameプロパティで指定します。

キーワードで指定した場合。from(開始)to(終了)

@keyframes [アニメーション名] {
 from {
  CSSプロパティ: 値;
 }
 to {
  CSSプロパティ: 値;
 }
}

%で指定した場合

@keyframes [アニメーション名] {
0% {
  CSSプロパティ: 値;
 }
 50% {
  CSSプロパティ: 値;
 }
100% {
  CSSプロパティ: 値;
 }
}

まとめ

  • CSS Animationはanimationプロパティでアニメーション全体の設定を行う。
  • @keyframesで、時間ごとに使用するCSSを指定する。
  • transitionより細かい指定が可能。