首页 文章

可怜的CSS背景动画

提问于
浏览
1

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

我想使用一些css动画来放置一个移动的背景(视差esque),如下所示
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

3 回答

  • 1

    虽然在Windows XP中使用Chrome和Firefox进行测试可以获得良好的性能,但是你的Tile.png和BlurBG.png似乎都有相当大的尺寸 . 至于我,我将Tile.png和BlurBG.png合并到一个文件中,因为Tile.png似乎看起来不像移动的BlurBG.png背后的静态背景 .

    但是,如果要将其保存为单独的两个文件,则可能需要更多地减小文件大小 . 我个人选择的工具是PNGoo .

  • 1

    在我的网站上使用Firefox或Chrome时,该网站的效果非常出色 .

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

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

    此外,考虑使背景图像变暗 - 背景中移动的对比色淹没了焦点 .

  • 2

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

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

    诀窍:)

相关问题