CSS背景圖像滾動動畫

Question

我已經設法在bg中滾動顯示圖像，但問題在於，對於高度超過屏幕尺寸高度的頁面，動畫不會顯示在頁面的底部（溢出的部分）

這裏是小提琴： jsfiddle demo

的CSS的動畫背景：

#main-banner .bg-animation{ 
    background: url('http://pentathemes.com/saasapp/images/intro-bg.gif') 0 0 repeat; 
    -webkit-animation: animate_background 10s linear 0s infinite; 
    -moz-animation: animate_background 10s linear 0s infinite; 
    -o-animation: animate_background 10s linear 0s infinite; 
    animation: animate_background 10s linear 0s infinite; 
    height:100vh; 
} 
@-webkit-keyframes animate_background { 
    from { 
     background-position: 0 0; 
    } 
    to { 
     background-position: 0 -200px; 
    } 
} 
@-moz-keyframes animate_background { 
    from { 
     background-position: 0 0; 
    } 
    to { 
     background-position: 0 -200px; 
    } 
} 
@-o-keyframes animate_background { 
    from { 
     background-position: 0 0; 
    } 
    to { 
     background-position: 0 -200px; 
    } 
} 
@keyframes animate_background { 
    from { 
     background-position: 0 0; 
    } 
    to { 
     background-position: 0 -200px; 
    } 
} 

正如你可以在上面的例子中看到，動畫並不適用於底部最後一行的頁面。

這是如何解決的？謝謝

Answer 1

哦，我現在看到了問題。

更換height:100vh;與min-height: 100vh; height:100%;