CSS filter（）转换/转换时间

Question

我有一个用于模糊元素的CSS过滤器，它的工作原理很漂亮...但是我希望它可以减轻模糊的影响，但无法弄清楚由哪个CSS transition-property控制它？

我正在使用transition: 1s; 但这会破坏元素上的另一个动画（它向左滑动）。

.event {
     // transition: 1s; // Works with blur() but breaks other animations
}

.event:hover {
     -moz-filter: blur(5px);
     -ms-filter: blur(5px);
     -o-filter: blur(5px);
     -webkit-filter: blur(5px);
     filter: blur(5px);
}

Answer 1

声明中的属性名称始终是冒号之前的部分，即使该值是一个函数也是如此。 因此，相应的transition-property为filter ：

.event {
    transition-property: -moz-filter, -ms-filter, -o-filter, -webkit-filter, filter;
    transition-duration: 1s;
}

这不仅适用于filter属性，而且还适用于诸如transform类的属性，并且通常将函数接受为值。

这也意味着，例如，如果您具有多个不同的滤镜或多个变换，则将对给定属性的所有它们进行动画处理。