预呈现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>

来源

2015-10-12 Tamás Bolvári

我知道我可以使用预渲染的图像，但我需要一个纯CSS的解决方案，或者至少是完全客户端的东西。 –

尝试添加此样式：'-webkit-transform：translateZ（0）; -moz-transform：translateZ（0）; -ms-transform：translateZ（0）; -o-transform：translateZ（0）; transform：translateZ（0）;' – guramidev

我试过了，但不幸的是它没有帮助。 –

我怀疑有没有金色子弹这一点，因为浏览器可能总是会有稍微不同的过滤器实现，并且像blur()这样的视觉上很重的效果可能总是有问题的。这就是说，有一个叫will-change CSS属性是正是这种情况：

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

的will-change属性不会触发预渲染本身，而是它确实给支持的浏览器抬头说的filter财产这个元素会在某些时候改变，并给他们时间进行优化。这通常会导致在支持浏览器的情况下创建新的硬件支持的渲染层，从而实现流畅的动画。

支持并不是非常好，但仍然是：最新的Chrome & Opera（包括Android）以及最新的Firefox。 WebKit已经实现，所以它可能会在下一个Safari中发布。对于其他人而言，注释中提到的transform -hack通常具有类似的效果（因为它会通过添加空3D转换触发硬件支持的渲染层），但是您的里程可能会有所不同。

来源

2015-12-18 20:25:11 Emil

will-change属性很有用，但不幸的是它在这种情况下无效。我已经用演示更新了这个问题，所以你可能会看到问题。（除非你的机器比我的机器快。）我的最终解决方案是一个简单的作弊：我在照片编辑软件中制作了原始照片的模糊，黑暗，灰度版本，并且我使用不透明度制作了动画而不是滤镜。它完美的作品。尽管如此，我希望将来会有一个“客户端CSS滤镜过渡预渲染器”，以便能够呈现更加壮观的效果。 –

预呈现CSS滤镜过渡？

回答

相关问题