如何防止「跳躍」背景動畫

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>