画像を使用したキーフレームアニメーションを最後のフレームで止めたい

Question

###実現したいこと
スプライト画像を使用して「3」「2」「1」と1秒ごとにカウントダウンするアニメーションをCSSで作りたく思っています。
画像は縦横300pxの正方形を縦に3つ繋げたスプライト画像で、スプライト画像の大きさは横300px、縦900pxです。

↓こんな縦長の画像です。画像名（count.png）
＿

3
＿

2
＿

1
＿

animationとkeyframesを使用して記述をしてみましたが、最後に最初のフレームである「3」に戻ってしまいます。
調べたところ、最後のフレームで止めるには「animation-fill-mode:forwards;」とあるのですが、こちらを記述してもうまくいきません。
カウントダウンなので、アニメーションは１回だけです。

###試した記述

<div id="count"></div>

#count{
	width: 300px;
	height: 300px;
	background-image: url("count.png");
	background-size: 300px 900px;
	-webkit-animation-name:startcount;
	-webkit-animation-duration:3s;
	-webkit-animation-timing-function: steps(3);
	-webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode:forwards;/*これが効かない？*/
	animation-name:startcount;
	animation-duration:3s;
	animation-timing-function: steps(3);
	animation-iteration-count: 1;
	animation-fill-mode:forwards;/*これが効かない？*/
}

@-webkit-keyframes startcount {
	from { background-position: 0 0; }
	to { background-position: 0 -900px; }
}

最後のフレームである「1」でアニメーションをストップさせる記述を教えていただけないでしょうか？
どうぞよろしくお願いいたします。

Answer 1

animation-timing-function: steps(3, end);

この記述では4段階となります。第2パラメーターは省略できないので確認してください。
https://developer.mozilla.org/ja/docs/Web/CSS/timing-function

おそらく、background-repeatがrepeatになっているのではないでしょうか？
リピートされた次の画像が表示されているのだと思います。

Comments

[umauman]

ご回答ありがとうございます。

ご指摘いただいた通り、下記のように記述を修正したところ意図する通りになりました。

animation-timing-function: steps(3, end);　←修正　※第二引数追加
background-repeat: no-repeat;　←追加

特に背景リピートのところは気づきにくいですね…。とても勉強になりました！