###実現したいこと
スプライト画像を使用して「3」「2」「1」と1秒ごとにカウントダウンするアニメーションをCSSで作りたく思っています。
画像は縦横300pxの正方形を縦に3つ繋げたスプライト画像で、スプライト画像の大きさは横300px、縦900pxです。
↓こんな縦長の画像です。画像名(count.png)
_
3
_
2
_
1
_
animationとkeyframesを使用して記述をしてみましたが、最後に最初のフレームである「3」に戻ってしまいます。
調べたところ、最後のフレームで止めるには「animation-fill-mode:forwards;」とあるのですが、こちらを記述してもうまくいきません。
カウントダウンなので、アニメーションは1回だけです。
###試した記述
html
1<div id="count"></div>
css
1#count{ 2 width: 300px; 3 height: 300px; 4 background-image: url("count.png"); 5 background-size: 300px 900px; 6 -webkit-animation-name:startcount; 7 -webkit-animation-duration:3s; 8 -webkit-animation-timing-function: steps(3); 9 -webkit-animation-iteration-count: 1; 10 -webkit-animation-fill-mode:forwards;/*これが効かない?*/ 11 animation-name:startcount; 12 animation-duration:3s; 13 animation-timing-function: steps(3); 14 animation-iteration-count: 1; 15 animation-fill-mode:forwards;/*これが効かない?*/ 16} 17 18@-webkit-keyframes startcount { 19 from { background-position: 0 0; } 20 to { background-position: 0 -900px; } 21}
最後のフレームである「1」でアニメーションをストップさせる記述を教えていただけないでしょうか?
どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/18 06:42