css - 预渲染CSS过滤器过渡？

是否可以由此预渲染过渡：

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>

最佳答案

我怀疑这没有万能的解决方法，因为浏览器可能始终具有略有不同的过滤器实现，并且像blur()这样的视觉效果可能总是有问题。就是说-有一个CSS属性叫做will-change，恰好适合这种情况：

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

will-change属性本身不会触发预渲染，但是它确实使支持的浏览器意识到该元素的filter属性会在某个时候发生变化，并为它们提供了优化的时间。通常，这会在支持浏览器的过程中创建一个新的由硬件支持的渲染层，从而实现平滑的动画效果。

到目前为止，支持还不够完善，但仍然支持：最新的Chrome和Opera（包括Android）以及最新的Firefox。 WebKit已实现，因此可能会在下一个Safari中发布。对于其他人，注释中提到的transform -hack通常具有相似的效果（因为它通过添加空3D变换来触发硬件支持的渲染层），但是您的工作量可能会有所不同。

关于css - 预渲染CSS过滤器过渡？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33073731/