css - 预渲染 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() 这样视觉效果很重的效果可能总是有问题。也就是说，有一个名为 will-change 的 CSS 属性正是针对这种情况的:

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

will-change 属性本身不会触发预呈现，但它确实为支持浏览器提供了一个提示，该元素的 filter 属性将在一些点，并给他们时间进行优化。这通常会导致在支持浏览器的情况下创建新的硬件支持渲染层，从而实现流畅的动画效果。

目前支持还不是特别好，但仍然是:最新的 Chrome 和 Opera(包括 Android)以及最新的 Firefox。 WebKit 已经实现，所以它可能会在下一个 Safari 中发布。对于其他人，评论中提到的 transform-hack 通常具有类似的效果(因为它通过添加空 3D 变换触发硬件支持的渲染层)，但您的里程可能会有所不同。