CSS 动画没有到达顶部

Question

你能指出我的 CSS 代码有什么问题吗？当我查看时，动画不会到达页面顶部 this page分辨率为 1920 x 1080。

非常感谢。

Answer 1

就在你的CSS文件的底部

@-webkit-keyframes bgobjects {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}

看起来您只将对象移动了 700 像素，所以这就是它们没有到达顶部的原因。尝试增加(或者我应该说，减少)这个值更多，或者尝试百分比。如果仍然无法正常工作，请创建一个简化的 JSFiddle这样我们就可以进一步帮助您。

请注意，您有两个与上述 CSS 类似的 block - 您需要更改这两个 block 中的值(应该相同，除了 -webkit 前缀)，因为它们将适用于不同的浏览器。