如何硬件加速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

简短的回答是浏览器决定何时使用硬件加速来呈现内容;这不是你可以强迫任何特定的类或风格的东西。但是，您可以使用更有可能让浏览器使用硬件加速的某些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，但我不确定如何重复你的脉冲动画，因为转换只会在属性值改变时运行。