CSS | アニメーションを最後の状態で停止させる方法

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

CSSアニメーションでanimation-fill-modeプロパティの「forwards」を使ってアニメーション完了時に元に戻さず最後の状態でアニメーションを停止させる方法の紹介、動作サンプルになります。

animation-fill-modeでの「forwards」の指定は、チャートのグラフや連続した動作を記述した長いアニメーションを作る際に、有効なアニメーションCSSプロパティです。

記述方法とanimation-fill-modeで指定可能な値

CSSアニメーションで最後の状態で停止させるには「animation-fill-mode」で「forwards」を指定します。

「animation」プロパティでの複合指定も可能です。

/* 個別に指定 */
animation-fill-mode: forwards;

/* まとめて指定 */
animation: anim 1s forwards;

animation-fill-modeで指定可能な値

animation-fill-modeにて設定可能な値は「none」「forwards」「backwards」「both」の4種類で、デフォルト値は「none（指定なし）」です。

そのまま使用した場合の基本的な挙動は以下の通りです。

アニメーションの最後の状態で停止させるサンプル

JavaScriptなどのスクリプトにて処理を実装する場合も多いですが、再生後の動作停止くらいであればCSSのみでも簡単な挙動であれば実装するのは簡単です。

animation-fill-modeの設定値毎による比較動作サンプルになります。

※右下のRerunボタンで再生できます。

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

animation-fill-modeで「forwards」と「both」を指定した場合は、アニメーション終了時に最後の状態で停止していることが確認できます。

動作サンプルのHTMLとCSSコードです。

 <div class="container">
  <p class="none">none</p>
  <p class="forwards">forwards</p>
  <p class="backwards">backwards</p>
  <p class="both">both</p>
 </div>

.container p {
	width: 0;
	margin: 10px 0;
	padding: 5px;
	color: #FFF;
}

.none {
	animation: anim 3s;
}

.forwards {
	animation: anim 3s forwards;
}

.backwards {
	animation: anim 3s backwards;
}

.both {
	animation: anim 3s both;
}

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

	100% {
		width: 300px;
		background: #0091EA;
	}
}