一連のキーフレームをアニメーション化して、動きの錯覚を与えようとしています。html 要素の背景位置を変更して、1 秒の間に別のフレームを表示し、再び再生されるまで 1 秒程度のギャップを設けたいと考えています。
ここに私が持っているものがあります - http://jsfiddle.net/kSNWV/ (-webkit
テスト目的で今のところフレーバーを作成しました)。これは私がアニメーション化しようとしている画像です (トンネルに入る電車) - http://i.imgur.com/6uOoK.png
私のHTML:
<div id="train"></div>
私のCSS:
#train { width: 110px; height: 43px; border: 10px solid #454545;
background: url(http://i.imgur.com/6uOoK.png) 110px 0;
-webkit-animation: train 2s linear 0s infinite normal; }
@-webkit-keyframes train {
0%{background-position: 110px 0;}
2%{background-position: 0px 0;}
4%{background-position: -110px 0;}
6%{background-position: -220px 0;}
8%{background-position: -330px 0;}
10%{background-position: -440px 0;}
12%{background-position: -550px 0;}
14%{background-position: -660px 0;}
16%{background-position: -770px 0;}
18%{background-position: -880px 0;}
20%{background-position: -990px 0;}
22%{background-position: -1100px 0;}
24%{background-position: -1210px 0;}
26%{background-position: -1320px 0;}
28%{background-position: -1430px 0;}
30%{background-position: -1540px 0;}
32%{background-position: -1650px 0;}
34%{background-position: -1760px 0;}
36%{background-position: -1870px 0;}
38%{background-position: -1980px 0;}
40%{background-position: -2090px 0;}
42%{background-position: -2200px 0;}
44%{background-position: -2310px 0;}
46%{background-position: -2420px 0;}
48%{background-position: -2530px 0;}
}
間の遷移をアニメーション化せずに、各ステップに「スナップ」する css3 アニメーションを使用することは可能ですか? また、このアニメーションを逆再生せずにリセットするにはどうすればよいですか (現在、最後に戻るアニメーションbackground-position
になっています)。-2530px
110px