html - 2 つの webkit-animation を同じ速度に設定し、一方をより長い距離移動させますか?

Question

[編集: 解決策は、2 つのコンテナーを作成し、2 つ目のアニメーション コンテナーを左: 100% に設定することでした。]

ページ全体で大きなgifを移動するための非常に基本的なアニメーションがあります。gifの幅は1536pxです。

ページの幅は無限に広がる可能性があるため、アニメーションは right:0px で開始し、right:100% で終了します。実際には、ページが現在使用されている最高のモニター解像度よりも大きくなるとは思いません。

アニメーションが無限に発生しているという感覚を生み出すために、2 つ目のアニメーションを作成し、これを右:-1536px で開始し、右:100% で終了しました。

残念ながら、この 2 番目のアニメーションはより長い距離をカバーしているため、最初のアニメーションよりも速く動いており、試みたシームレス アニメーションは機能しません。animation-duration が持続時間の代わりに一定の 1 ピクセル/秒または同等のもので機能することを指定する方法はありますか? ブラウザは任意のサイズになる可能性があるため、一致するように期間を長くできるとは思いません。

どんな助けやアイデアも大歓迎です！

私のコードは次のとおりです。

@-webkit-keyframes frontrocks-anim2 {
  0%{right:-1536px;}
  100%{right:100%;}
}

@-moz-keyframes frontrocks-anim2 {
  0%{right:-1536px;}
  100%{right:100%;}
}

.frontrocks-anim2 {
    -webkit-animation:frontrocks-anim2 30s infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay: 0s;
    -moz-animation:frontrocks-anim2 30s infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-delay: 0s;
}