このバックグラウンドアニメーションが「ジャンプ」するのを防ぐ方法

Question

ご覧のとおり、この背景はアニメーションダウンします。私は、アニメーションが終了した後を除いて、私が正しく働くことを望むすべてを持っている、それは私が望んでいないこのジャンプを行います。私はちょうどそれをそれにジャンプすることなく、無限にスクロールしたい。以下のCodePen。ちょうど一致している必要があり、最終的なキーフレームでは、約10秒

http://codepen.io/anon/pen/JEpJVL

<div> 
</div> 

CSSの後にそれがジャンプせずにスクロールすること

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

@keyframes backgroundScroll { 
from {background-position: 0 0;} 
to {background-position: 0 400px;} 
} 
div{ 
    height: 300px; 
    width: 300px; 
    background: url('https://c1.staticflickr.com/4/3405/3582443182_80cf2d4f23.jpg') repeat-y; 
    -webkit-animation: backgroundScroll 10s linear infinite; 
    animation: backgroundScroll 10s linear infinite; 
} 

Answer 1

あなたの背景の位置を維持する方法について

任意の提案画像の高さ（この場合は375px）：

@-webkit-keyframes backgroundScroll { 
 
    from { 
 
    background-position: 0 0; 
 
    } 
 
    to { 
 
    background-position: 0 375px; 
 
    } 
 
} 
 
@keyframes backgroundScroll { 
 
    from { 
 
    background-position: 0 0; 
 
    } 
 
    to { 
 
    background-position: 0 375px; 
 
    } 
 
} 
 
div { 
 
    height: 300px; 
 
    width: 300px; 
 
    background: url('https://i.stack.imgur.com/d3nOs.png') repeat-y; 
 
    -webkit-animation: backgroundScroll 10s linear infinite; 
 
    animation: backgroundScroll 10s linear infinite; 
 
}

<div></div>