PNGアニメーション（CSS） | 動くWebデザインアイディア帳

イラスト・オブジェクトの動き
-PNGアニメーション（CSS）-

See the Pen 9-3-5 おまけ：様々なPNGアニメーション by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね！

動きを実現する仕組み

仕組み　⇒　アニメーションをする画像を1コマずつ並べ、1枚のPNG画像で書き出し、CSSでコマ送りをして動かす。動かすきっかけを作りたい場合はJavaScriptで制御する。
長所　⇒　アニメーションの開始や繰り返しといった動きをCSSやJavaScriptを使って外部から制御可能
短所　⇒　APNGと比べて容量が重い

1枚のPNG画像にコマ送りでシーンを描画し、CSSのanimationプロパティであるstepsを利用してコマを動かす。

作り方

【画像の作り方】

①　画像制作ソフトを使い、動くコマを集約したPNG画像を作る。
カンバスサイズをコマ数分、分割してガイドを引き、コマ内に描画する。
サンプル（※サンプルデータ：https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/move02/9-3-1/design_file.zip）は、Adobe Photoshopを使い、W400px　ｘ　H100pxのカンバスを4分割して4コマ分制作。

PNGアニメーションの作り方

②　制作したコマは透過PNG形式（透過）にして、書き出す。
「ファイル」→「書き出し」→「Web用に保存（従来）」→書き出し形式：PNG-24、透明部分：チェックあり⇒「保存」

PNGアニメーションの作り方

【HTMLの書き方】

HTMLに空要素を設定し、CSSの背景画像に制作した画像を読み込む。
CSSのanimationプロパティであるstepsを利用して1コマずつ動かす。

①　head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/9-3.css">
</head>

②　body内にHTMLを記載します。

<div class="steps"></div>

【CSSの書き方】

■　png画像が1度だけ動く

.steps{
  width: 100px;/*1フレーム分の横幅*/
  height: 100px;/*1フレーム分の縦幅*/
  background: url("../img/steps.png") no-repeat;/*背景画像の読み込み*/
  animation: stepsline 1s steps(3) forwards;
	/*stepsline→アニメーション名
    1s→アニメーションをする時間
    step→（）の中には、アニメーション制作コマ数-1の値を入れる（例：4コマ-1コマ=3コマ）
    forwards→最後の形を維持*/
}

@keyframes stepsline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -300px 0;/*アニメーション制作コマ数から1コマ分引いた横幅を指定。
（例：今回は1フレーム横幅100pxで制作しているので全体の400px-100px=300px⇒-300px）を指定。*/
  }
}

See the Pen
9-3-1 PNGアニメーション（png画像が1度だけ動く） by 動くWebデザインアイディア帳 (@ugokuweb)
on CodePen.

■　png画像がループして動く

.steps{
  width: 100px;/*1フレーム分の横幅*/
  height: 100px;/*1フレーム分の縦幅*/
  background: url("../img/steps.png") no-repeat;/*背景画像の読み込み*/
  animation: stepsline 1s steps(5) infinite;
	/*stepsline→アニメーション名
    1s→アニメーションをする時間
    step→（）の中には、1フレーム分最後に余白を持たせてループをさせたいので、アニメーション制作コマ数+1の値を入れる（例：4コマ+1コマ=5コマ）
    infinite→無限ループ*/
}

@keyframes stepsline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -500px 0;/*1フレーム分最後に余白を持たせてループをさせたいので、アニメーション制作コマ数から1コマ分足した横幅（今回は1フレーム100pxで制作しているので全体の400px+100px=500px⇒-500px）を指定。*/
  }
}

See the Pen
9-3-2 PNGアニメーション（png画像がループして動く） by 動くWebデザインアイディア帳 (@ugokuweb)
on CodePen.

■　hoverするとpng画像が動く
※スマートフォンのタッチには非対応

.steps{
    cursor: pointer;/*カーソルを指マークに変更*/
    width: 100px;/*1フレーム分の横幅*/
    height: 100px;/*1フレーム分の縦幅*/
    background: url("../img/steps.png") no-repeat;/*背景画像の読み込み*/
}

.steps:hover{
    animation: stepsline 1s steps(3) forwards;
	/*stepsline→アニメーション名
    1s→アニメーションをする時間
    step→（）の中には、アニメーション制作コマ数-1の値を入れる（例：4コマ-1コマ=3コマ）
    forwards→最後の形を維持*/
}

@keyframes stepsline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -300px 0;/*アニメーション制作コマ数から1コマ分引いた横幅を指定。
（例：今回は1フレーム横幅100pxで制作しているので全体の400px-100px=300px⇒-300px）を指定。*/
  }
}

See the Pen
9-3-3 PNGアニメーション（hoverするとpng画像が動く） by 動くWebデザインアイディア帳 (@ugokuweb)
on CodePen.

【JavaScriptと組み合わせて動かすきっかけを設定する方法】

■ 動きを実現する仕組み

HTML 内の「動かす要素」に「動くきっかけの起点となるクラス名」を付け、jQuery 側で動くきっかけの動作（スクロールなど）をしたら、アニメーション用のCSS のクラス名が付与されるという指定を行う。

■ HTMLの書き方

①head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/9-3-4.css">
</head>

② body内の要素に動くきっかけの起点となるクラス名を記載します。

<div class="stepsTrigger"></div>

③ body 終了タグ直前に jQuery、動きを制御する自作のJavaScript の2つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!--自作のJavaScript-->
<script src="js/9-3-4.js"></script>
</body>

■ CSSの書き方

.stepsTrigger{
	opacity:0;
}

.steps{
  width: 100px;/*1フレーム分の横幅*/
  height: 100px;/*1フレーム分の縦幅*/
  background: url("../img/steps.png") no-repeat;/*背景画像の読み込み*/
  animation: stepsline 1s steps(3) forwards;
	/*stepsline→アニメーション名
    1s→アニメーションをする時間
    step→（）の中には、アニメーション制作コマ数-1の値を入れる（例：4コマ-1コマ=3コマ）
    forwards→最後の形を維持*/
}

@keyframes stepsline {
  0% {
    opacity:0;
    background-position: 0 0;
  }
  100% {
    opacity:1;
    background-position: -300px 0;/*アニメーション制作コマ数から1コマ分引いた横幅を指定。
（例：今回は1フレーム横幅100pxで制作しているので全体の400px-100px=300px⇒-300px）を指定。*/
  }
}

■ JavaScriptの書き方

// 動きのきっかけの起点となるアニメーションの名前を定義
function stepsAnime(){

	$('.stepsTrigger').each(function(){ //stepsTriggerというクラス名が
		var elemPos = $(this).offset().top-50;//要素より、50px上の
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
		$(this).addClass('steps');// 画面内に入ったらstepsというクラス名を追記
		}else{
		$(this).removeClass('steps');// 画面外に出たらstepsというクラス名を外す
		}
		});

}

// 画面をスクロールをしたら動かしたい場合の記述
	$(window).scroll(function (){
		stepsAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
	$(window).on('load', function(){
		stepsAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

See the Pen
9-3-4 JavaScriptと組み合わせて動かすきっかけを設定する方法 by 動くWebデザインアイディア帳 (@ugokuweb)
on CodePen.