Question

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

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

我通过webkit animate函数

在关键帧配置中使用了background-position移动

这是一个示例

#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语句启动硬件加速，但没有发生可见的更改。

我也尝试将background-position更改为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

该网站在我的最终使用Firefox或Chrome在Linux上运行得非常好。

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

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

另外，请考虑使背景图像变暗 - 背景中移动的对比色会淹没焦点。

Answer 3

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

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

诀窍：）

可怜的CSS背景动画

3 个答案: