为什么背景动画在滚动时会提高速度

Question

我使用CSS动画为网站中的背景制作动画。

您可以在此处查看动画： http://pce-fet.com/?page=members

问题是，当滚动到底部越来越多时，动画速度越来越快！

我不知道为什么会这样，它应该保持速度恒定！

css动画代码：

.AnimBG { background: url(../common/skyBG.jpg) repeat;animation: 50s linear animateBackground infinite; background-attachment: scroll; background-position: 0 0; background-size: 1365px 677px;}

@keyframes animateBackground {
    0% {background-position: 0 0; background-size: 1365px 677px; }
    50% {background-size: 2047px 1015px;background-position: -200px 338px;}
    100% {background-position: 0 677px;background-size: 1365px 677px;}
}

注意：我已经将实时网站中的动画更改为以下内容：

@keyframes animateBackground {
    0% {background-position: 0 0;  }
    50% {background-position: -200px 338px;}
    100% {background-position: 0 677px;}
}

如果您希望再次看到此问题，则可以轻松检查css并将@keyframes恢复为旧的css。