預渲染CSS過濾器過渡？

Question

是否可以由此預渲染過渡：

filter:blur(10px) grayscale(100%) brightness(50%);

...對此：

filter:blur(0) grayscale(0) brightness(100%);

我想要一個平穩的過渡，但是現在FPS非常低。 請以全頁模式查看以下示例。 （在全高清屏幕上使用NVIDIA GeForce GT 240M進行了測試，因此更快的GPU可能不足以像我一樣慢。）

 div { background-image: url('https://static.pexels.com/photos/1998/sea-landscape-mountains-nature.jpg'); background-size: cover; -webkit-filter: blur(10px) grayscale(100%) brightness(50%); filter: blur(10px) grayscale(100%) brightness(50%); height: 1080px; transition: all 1s; width: 1920px; will-change: filter; } div:hover { -webkit-filter: blur(0) grayscale(0) brightness(100%); filter: blur(0) grayscale(0) brightness(100%); } 

 <div></div> 

Answer 1

我懷疑這沒有萬能的解決方法，因為瀏覽器可能始終會略有不同的過濾器實現，而像blur()這樣的視覺效果可能總是有問題。 就是說-有一個CSS屬性叫做will-change ，它恰好適合這種情況：

.my-element {
  will-change: filter;
}

will-change屬性本身不會觸發預渲染，但確實可以使支持的瀏覽器提前意識到該元素的filter屬性將在某個時候發生變化，並為它們提供了優化的時間。 通常，這會在支持瀏覽器的過程中創建新的硬件支持的渲染層，從而實現平滑的動畫。

到目前為止，支持還不夠完善，但仍然支持：最新的Chrome和Opera（包括Android）以及最新的Firefox。 WebKit已實現，因此可能會在下一個Safari中發布。 對於其他人，注釋中提到的transform hack通常具有類似的效果（因為它通過添加空3D變換來觸發硬件支持的渲染層），但是您的工作量可能會有所不同。