Cssアニメーション反復

Question

私はjrのjavascriptスロットマシンを作っています。 devのインタビューテスト。私は縦にお互いの上に配置された画像を持つ列である5つの "リール"を持っています。アイデアは、列を下にスクロールさせ、最後に到達し、スムーズに上に戻って流体アニメーションのように見えるようにすることです。 JQueryライブラリが重い作業をしていることは知っていますが、自分のコードを一から書きたいと思っています。私の現在の考えは、CSSのアニメーションとキーフレームを使用して流体の動きで列の下端までスクロールし、JQueryでアニメーションを開始することです。アニメーションを円滑に元の位置に戻して希望の効果を作り出す方法はありますか？

Answer 1

キーフレームを画像の下から上にジャンプすることなく（この場合）ジャンプする前の状態に戻したい場合。キーフレーム内の％値を利用します。 @keyframes Animation{ 0% {postion: 0;} 25% {postion: 20;} 50% {postion: 40;} 75% {postion: 20;} 100% {postion: 0;} } あなたが実際にimgを動かしているのを知っていないので、cssを即興しなければならなかった。

このようにして、アニメーション全体が最後にリセットされ、ビジュアルジャンプなしでさらに反復が可能になります。