3

我正在使用 CSS 对 box-shadow 进行动画处理。使用Instruments程序，我发现仅这个动画就占用了 iOS Safari 上35% 的 CPU ！当我离开页面运行时，iPhone 变得越来越热。如果我注释掉动画，CPU 使用率就会恢复正常。我怎样才能硬件加速这个动画而不会使 CPU 紧张？

CSS发光

jsFiddle：http: //jsfiddle.net/tokyotech/TutLh/

@-webkit-keyframes pulseGlow {
    0% {
        box-shadow: none;
    }
    10% {
        box-shadow: 0 0 1.4em rgba(255,0,0,1),
            0 0 1em rgba(255,0,0,1) inset;
        border-color: rgba(255,0,0,0.5);
    }
}

#recordButton {
    display: block;
    width: 5em;
    height: 5em;
    background: salmon;
    border-radius: 50%;
    -webkit-animation: pulseGlow 1s ease-in-out 1s infinite;
}
4

1 回答 1

1

简短的回答是浏览器决定何时使用硬件加速来渲染某些东西。这不是你可以对任何特定的类或风格强加的东西。但是，您可以使用某些 css 属性，这些属性更有可能让浏览器对其使用硬件加速，例如-webkit-transform: translate3d（即使您正在页面上执行 2d 转换）和-webkit-transition.

有关一些注意事项以及硬件加速属性列表，请参阅本文。

至于您的特定动画问题，我不确定您如何能够在没有用户交互或使用 Javascript（单独或除了 CSS 之外）的情况下实现重复转换。虽然您可以拥有-webkit-transition: box-shadow，但我不确定您将如何重复您的脉冲动画，因为转换只会在属性值更改时运行。

于 2013-05-09T22:11:56.570 回答