CSS | アニメーションをコマ送りで再生する方法

2020-09-27CSS アニメーション 基本,CSS

CSSのanimationプロパティを使って、アニメーションをコマ送りで再生する実装方法を紹介しています。

CSSアニメーションでコマ送りを表現する記述例

コマ送りを表現するには「animation-timing-function」にて「steps()」を利用します。

/* 個別に指定 */
animation-timing-function: steps(10, end);

/* まとめて指定 */
animation: anim 1s steps(10, end);

コマ送りにする分割数と、開始・終了のタイミングを指定可能です。

アニメーション時間内において、分割数を少ないほど荒いコマ送りになり、多いほど細かいコマ送りになります。

steps()で指定可能な値

steps()で指定可能な値は「end」「start」「jump-both」「jump-none」の4種類です。

「jump-end」「jump-start」は「end」「start」と同じ扱いとなっています。

また、デフォルト値である「end」を指定する場合は、省略できます。

steps()の比較動作サンプル

steps()を使ったコマ送りの比較動作サンプルです。

See the Pen CSS animation steps by yochans (@yochans) on CodePen.

※右下のRerunボタンでリスタート再生できます

※サンプルでは、比較用にsteps()を指定していない要素を設置しています

「end」「start」「jump-both」「jump-none」でそれぞれアニメーションの再生時、開始タイミング、終了タイミングが違うことが確認できます。

「animation-timing-function」のデフォルト値がアニメーションの動きにに強弱のある「ease」になっているのと同様に、「end」はデフォルト値ですが癖がない、という指定値のわけではありませんので、step()を指定していない同等のアニメーションと比較した場合と比べて一番作成しているアニメーションにあったものを選びます。

<div class="container">
	<p>none<p>
	<div class="none"></div>
	<p>end<p>
	<div class="end"></div>
	<p>starte<p>
	<div class="start"></div>
	<p>jump-both<p>
	<div class="jump-both"></div>
	<p>jump-none<p>
	<div class="jump-none"></div>
</div>

.container p {
	padding: 0 6px;
	margin: 0;
}
.container div {
	width: 0;
	height: 10px;
	background: #0091EA;
}

.none {
	animation: anim 5s linear forwards;
}

.end {
	animation: anim 5s steps(5) forwards;
}

.start {
	animation: anim 5s steps(5, start) forwards;
}

.jump-both {
	animation: anim 5s steps(5, jump-both) forwards;
}

.jump-none {
	animation: anim 5s steps(5, jump-none) forwards;
}


@keyframes anim {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

CSSアニメーションについて他にも色々と紹介していますので、是非覗いていってください。