如何硬件加速 CSS 中的盒子阴影动画？答案

【问题标题】：How to hardware accelerate a box-shadow animation in CSS?如何硬件加速 CSS 中的盒子阴影动画？
【发布时间】：2013-05-10 06:11:56
【问题描述】：

我正在使用 CSS 在 box-shadow 上制作动画。使用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;
}

【问题讨论】：

标签： ios css webkit hardware-acceleration

【解决方案1】：

简短的回答是浏览器决定何时使用硬件加速来渲染某些东西；这不是你可以对任何特定的类或风格强加的东西。但是，您可以使用某些 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，但我不确定您将如何重复您的脉冲动画，因为过渡只会在属性值更改时运行。

【讨论】：

动画正在重复，因为我在-webkit-animation 属性的末尾有infinite。
我意识到，问题是你如何使用transform 而不是animation 来实现这一点，所以它将被硬件加速。
恐怕是 webkit-animation 导致 cpu 长大，而不是 box-shadow。所以请尝试用transform或其他函数替换box-shadow，看看问题是否仍然存在。