Question

我使用以下CSS：

.navbar .agesbar {
        height: 55px;
        background-image: url('/img/nicebar.jpg');
        background-repeat: repeat-y;
        background-position: center center;
        background-size: cover;

        width: 100%;
        -webkit-animation: agesTicker 120s linear infinite;
        animation: agesTicker 120s linear infinite;
    }

    @-webkit-keyframes agesTicker {
        from {background-position: 0 0;}
        to {background-position: -2446px 0;}
    }       
    @keyframes agesTicker {
        from {background-position: 0 0;}
        to {background-position: -2446px 0;}
    }

一切正常，遗憾的是，它在Google Chrome上消耗的CPU过多。（10-20％）。在Firefox，甚至是Internet Explorer上，它都不会浪费那么多CPU（只有2-3％）。我通过添加：

修复了高CPU使用率

will-change: transform;

迫使gpu加速，遗憾的是它并没有解决性能问题，因为现在GPU正在变得越来越重＆＃34;：笔记本电脑越来越暖和我的笔记本电脑中的风扇越来越响了

我有两个问题：1。为什么这部动画在Chrome上运行得如此糟糕，而在其他浏览器上却不错？ 2.此动画是否有替代品，例如jquery脚本？

Answer 1

您可以尝试使用CSS Bundle bundle = Platform.getBundle("plugin id");，而不只是使用js / jQuery更改背景位置：

＆＃13;

transition

＆＃13;

$(document).ready(function() {
  $('.test').css({'background-position': '0px -200px'});
});

＆＃13;

.test {
  background: url('http://lorempixel.com/400/200/sports/') no-repeat 0 0;
  width: 100px;
  height: 100px;
  transition: background-position 2s;
}

＆＃13;

Answer 2

我猜这个问题是由background-size: cover引起的，据我所知，调整后的图片没有缓存，所以浏览器每次都要重新计算它

尝试删除它，看看有什么变化

Answer 3

我猜background-position动画很慢。也许translate的动画会更快？

CSS，＆＃34; -webkit-animation＆＃34;在Google Chrome上消耗过多的CPU

3 个答案: