ios - 如何硬件加速 CSS 中的框阴影动画？

Question

我正在使用 CSS 在盒子阴影上制作动画。使用Instruments程序，我发现仅这个动画就占用了 iOS Safari 上 35% 的 CPU!当我让页面继续运行时，iPhone 会变得越来越热。如果我注释掉动画，CPU 使用率就会恢复正常。我怎样才能硬件加速这个动画而不会使 CPU 紧张？

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;
}

Answer 1

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

See this article for some notes as well as a list of hardware accelerated properties.

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