CSSのanimationを使ってパラパラ漫画のような動きを実装する

animationのイージングの中にあるsteps()を使って、パラパラ漫画のようなアニメーションを実装してみます。

サンプルコード

HTML

<div class="ball">
	<img src="ball.gif" width="100" height="4000" alt="" />
</div>

CSS

.ball {
	position: relative;
	width: 100px;
	height: 200px;
	overflow: hidden;
}
.ball img {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-animation: ball 2s steps(20) infinite;
	animation: ball 2s steps(20) infinite;
}

@-webkit-keyframes ball {
	from {
		top: 0px;
	}
	to {
		top: -4000px;
	}
}

@keyframes ball {
	from {
		top: 0px;
	}
	to {
		top: -4000px;
	}
}

steps(X)を指定すると、アニメーション処理をX分割して順々に表示されるようになります。
パラパラ漫画のようなアニメーションのデモページ