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

我使用CSS在盒子阴影上进行动画处理。使用Instruments程序，我发现这个动画仅在iOS Safari上使用35％的CPU！当我离开页面时iPhone变得越来越热。如果我注释掉动画，CPU使用率恢复正常。我怎样才能硬件加速这个动画不会让CPU过度疲劳？如何硬件加速CSS中的盒子阴影动画？

css glow

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

来源

2013-05-09 Pwner

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

来源

2013-05-09 22:11:56 DigTheDoug

动画重复出现，因为'-webkit-animation'属性的末尾有'无限'。 – Pwner 2013-05-09 23:49:59

我意识到，问题是如何使用'transform'而不是'animation'来实现这一点，所以它将被硬件加速。 – DigTheDoug 2013-05-10 13:41:03

恐怕是webkit-animation导致CPU长大，而不是盒子阴影。所以请尝试用变换或其他函数替换box-shadow，并检查问题是否仍然存在。 – 2013-05-10 22:56:55

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

回答

相关问题