[解決済み] 背景画像を前後にパンするCSS【非公開

質問

ここに示されている例のように、背景画像をアニメーション化するCSSのみの方法を探しています。

https://www.html5andbeyond.com/css3-animated-backgrounds-infinite-scrolling-background/

しかし、無限ループではなく、画像（山並み）をゆっくりと前後にパンさせ、ページロード時に画像の左側を見て、数秒後に右側を見て、また戻るようにしたいのです。

重要な注意点は、背景のあるdivは全幅なので、アニメーションに絶対値を設定することです。

何かご指摘がありましたらよろしくお願いします。

EDIT: 上記リンク先の例のスクロールのコードです。

<style>
@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -99999999px 0;} }

@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -99999999px 0;} }

#mtn-scroll {
width: 100%;
height: 35em;
background: url(mtns.jpg) no-repeat;
-webkit-animation: backgroundScroll 999999s linear infinite;
animation: backgroundScroll 999999s linear infinite; }
</style>

<div id="mtn-scroll"></div>

解決方法は？

キーフレームアニメーションをパーセンテージに変更すればいいのです。

@keyframes backgroundScroll {
    0%   {background-position: 0 0;}
    50%  {background-position: -400px 0;}
    100% {background-position: 0 0;}
}

それなら、アニメーションの時間を2倍にすればいいんです。

background: url(bg-repeat.png) repeat-y;
    animation: backgroundScroll 40s linear infinite;
}