So verhindern Sie, dass diese Hintergrundanimation "springt"

Question

Wie Sie sehen können, wird dieser Hintergrund animiert. Ich habe alles, was ich will, außer, nachdem die Animation beendet ist, macht es diesen Sprung, den ich nicht will. Ich will nur, dass es endlos scrollt, ohne diesen Sprung zu haben. CodePen unten.

Vorschläge, wie gerade zu halten, nach ca. 10s

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

Ihre Hintergrundposition in der letzten Keyframe ohne diesen Sprung machen scrollen muss das Spiel Höhe des Bildes, in diesem Fall 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>