糟糕的CSS背景动画

Question

所以我今天一直在为我正在开发的应用程序制作一个简单的启动页面

我想使用一些css动画放置一个移动背景（视差式），如下所示
http://css-tricks.com/parallax-background-css3/

我通过 webkit 动画功能在关键帧配置中使用了背景位置移动

这是一个示例

#BigWrapper{
    -webkit-animation-name: MOVE;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-animation-duration: 250s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }
     @-webkit-keyframes MOVE {
     from {
     background-position: 5% 5%;
    }
    to {
        background-position: 1300% 600%;
    }
    }

这产生了相当差的性能。 背景图像是具有透明度的PNG32压缩到 896KB。我尝试使用空白的 translate3d 语句启动硬件加速，但没有发生明显的更改。

我还尝试将背景位置更改为 translate3d，它移动了整个div 以及它包含的内容。我不确定如何在不影响性能的情况下产生这种效果。

这是测试站点 www.auroragm.sourceforge.net

Answer 1

虽然在Windows XP中使用Chrome和Firefox进行测试会产生良好的性能，但Tile.png和BlurBG.png似乎都有相当大的尺寸。至于我，我会将Tile.png与BlurBG合并.png作为一个文件，因为Tile.png看起来不像移动的BlurBG后面的静态背景.png。

但是，如果要将其保留为单独的两个文件，则可能需要进一步减小文件大小。我个人选择的工具是PNGoo。

Answer 2

这个网站在我的最后运行得非常好，在Linux上使用Firefox或Chrome。

您在哪个浏览器上测试？ 也许IE对大型背景图像的动画反应不佳。

考虑将背景动画限制为某些浏览器。

此外，请考虑使背景图像稍微变暗 - 背景中移动的对比色会淹没中心。

Answer 3

事实证明，我所要做的就是告诉浏览器每次有更新时停止缓存，这显然有很大帮助：

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

伎俩:)