html - CSS背景图片滚动动画

Question

我设法在 bg 中滚动了一个图像，但问题是对于它的高度大于屏幕尺寸高度的页面，动画没有显示在页面底部(溢出部分)

这是 fiddle : 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;高度:100%;