一方向へのスクロールバックキー

Question

バックグラウンドスクロール効果を下から上に持っていきたいと思っていますが、その方法はわかりません。
私はCSSを使って試してみましたが、ここでは上下左右の両方向にスクロールするという問題が発生します。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    animation: change 2s infinite ease-in both; 
 
    background-image: url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/background-pictures-2.jpg); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 
@keyframes change { 
 
    0%, 100% { 
 
    background-position: 0% 5%; 
 
    } 
 
    5% { 
 
    background-position: 0% 10% 
 
    } 
 
    10% { 
 
    background-position: 0% 15% 
 
    } 
 
    15% { 
 
    background-position: 0% 20% 
 
    } 
 
    20% { 
 
    background-position: 0% 25% 
 
    } 
 
    25% { 
 
    background-position: 0% 30%; 
 
    } 
 
    30% { 
 
    background-position: 0% 35% 
 
    } 
 
    35% { 
 
    background-position: 0% 40% 
 
    } 
 
    40% { 
 
    background-position: 0% 45% 
 
    } 
 
    45% { 
 
    background-position: 0% 50% 
 
    } 
 
}

<div> 
 
    <h1> This is animating background ...</h1> 
 
</div>

Answer 1

あなただけのキーフレームの変更のためにtoとfrom属性を使用していることを達成することができます。背景上部と下部が一緒に適合しないので、効果が...、一種の奇妙である

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    animation: change 3s linear infinite; 
 
    background-image: url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/background-pictures-2.jpg); 
 
    background-size: cover; 
 
    background-repeat: repeat-y; 
 
    background-position: 0 0; 
 
} 
 
@keyframes change { 
 
    from { 
 
    background-position: 0 100vh; 
 
    } 
 
    to { 
 
    background-position: 0 0; 
 
    } 
 
}

<div> 
 
    <h1> This is animating background ...</h1> 
 
</div>