如何硬件加速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中的盒子陰影動畫？

回答

相關問題