首页 文章

CSS3关键帧动画完成后，100％CPU使用率很长 - 如何避免？

提问于
浏览 次
1

我在我正在开发的Web应用程序中尝试一些CSS3关键帧动画 . 我已尝试过我自己的自定义动画和一些由animate.css提供的动画 . 结果是一样的：动画工作正常，但过了一段时间，即使我单独离开浏览器，CPU使用率也会上升到100％左右并保持不变 . 杀死该进程会杀死Web应用程序，删除CSS动画可以解决问题，所以毫无疑问到目前为止我已经看到了这个问题 . -1758245_

Web应用程序的目标平台包括iOS和Android，通过Phonegap，Windows和OSX通过node-webkit . 我描述的问题在移动Safari中似乎没有出现，但其他平台呢？这是关键帧动画的一般问题吗？是否有任何技巧可以避免这种情况？

编辑：添加demo link，但无法复制问题 . 在完整的应用程序中，我使用了许多库和框架，如AngularJS，Angular-UI，Angular-UI-router，Fastclick，Animate.css等 . 我猜他们可能会以某种方式干扰？很难说，但从应用程序中删除我的动画也删除了延迟100％的CPU使用率 .

HTML：

<button id="start">Start</button> <button id="reset">Reset</button>


<div id="ball" class="ball"></div>

使用Javascript：

document.getElementById('start').addEventListener('click', function(e) {
    document.getElementById('ball').classList.add('remove');
});

document.getElementById('reset').addEventListener('click', function(e) {
    document.getElementById('ball').classList.remove('remove');
});

CSS：

.ball {
    width:100px;
    height:100px;
    border-radius:100px;
    background-color:darkred;
    position:absolute;
    top:100px;
    left:200px;
}

@-webkit-keyframes slide {
    from { top:100px; left:200px; }
    to { top:100px; left:-100px; }
}

.remove {
    animation: slide 1s linear;
    -webkit-animation: slide 1s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}
html5 css3 animation cordova css-animations

3 回答

  • 1

    如果我怀疑您在Chrome上进行主要测试是正确的，那么100％CPU使用率的原因是 -webkit-animation-fill-mode: forwards 声明 .

    根据an article by Wercker以及我自己的研究，它看起来像Chrome的当前错误（在30.0.1599.101版本上测试过）：

    对于这个动画，我们使用动画关键帧和-webkit-animation-fill-mode：forwards;这样侧边栏就可以保留动画最后一帧的位置 . 动画通常会在完成播放后快速恢复到原始设置 . 这对我们来说很好，但对Chrome来说却不是 . 使用-webkit-animation-fill-mode：forwards的CSS动画;导致100％CPU负载错误 . 它实际上只发生在CSS动画结束且选项卡处于非活动状态时 .

    这似乎是由Chromium项目页面上的this issue证实的 .

    正如Lindsey Bateman在文章中所说，这个漏洞在Chrome Beta和Chrome Canary（33.0.1706.0 canary）中得到修复，所以我们不应该等待很长时间才能将其变为当前的Chrome .

    回复于
  • 1

    如果你正在使用3d（例如，即使不是，有些人建议在3d中使用CSS来让GPU帮助渲染），试试这个技巧via mddw

    translateZ(0) /* only needed if no CSS-3d commands are used to toggle GPU rendering */
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
backface-visibility: hidden;
perspective: 1000;
    回复于
  • 3

    我通过禁用所有扩展来解决问题 . 仍有待调查哪一个负责 . 这些是嫌犯：

    • AngularJS Batarang 0.4.3

    • avast！在线安全8.0.1500

    • ColorZilla 0.5.4

    • HootSuite Hootlet 4.0.10

    • iGetter 2.9.2

    • 英特尔®XDK2.6.1

    • Ripple Emulator（Beta）0.9.15

    • Xmarks书签同步

    回复于

相关问题