keyframesのアニメーションで完了時の状態で停止する

keyframesのアニメーション完了後に、完了時(100%)の状態で停止させる方法をメモ。

サンプルコード

まずは特に対応しなかった場合のサンプルです。

HTML

<div class="parent">
	<p>ここにオンマウス</p>
	<div class="target1">フェード表示</div>
	<div class="target2">時間差でフェード表示</div>
</div>

CSSは必要な部分のみ抜粋します。

CSS

.target1, .target2 {
	opacity: 0;
}
.parent:hover .target1,
.parent:hover .target2 {
	animation: show 1000ms 1;
}
.parent:hover .target2 {
	animation-delay: 500ms;
}
@keyframes show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

アニメーション完了後、最初の状態(opacity: 0;)に戻ってしまいました。
keyframes完了時の状態で停止するデモページ
　

animation設定時に合わせてopacity: 1;を設定してみます。

CSS

.target1, .target2 {
	opacity: 0;
}
.parent:hover .target1,
.parent:hover .target2 {
	animation: show 1000ms 1;
	opacity: 1;
}
.parent:hover .target2 {
	animation-delay: 500ms;
}
@keyframes show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

animation-delayを設定していない場合はこれで問題ないのですが、animation-delayを設定している場合、delayの時間分だけopacity: 1;が効いてしまいます。
keyframes完了時の状態で停止するデモページ2
　

調べてみると、animation-fill-modeプロパティを使うといいようです。

CSS

.target1, .target2 {
	opacity: 0;
}
.parent:hover .target1,
.parent:hover .target2 {
	animation: show 1000ms 1;
	animation-fill-mode: forwards;
}
.parent:hover .target2 {
	animation-delay: 500ms;
}
@keyframes show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

animation-fill-mode: forwards;を設定することで、完了時の状態で停止することができました。
keyframes完了時の状態で停止するデモページ3
　

【参考サイト】

• CSS Animation アニメーション完了後にアニメーションの最後の状態のままで止めたい – かもメモ
• animation-fill-mode – CSS | MDN