预渲染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变换来触发硬件支持的渲染层），但是您的工作量可能会有所不同。