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 等通常接受函数作为值的属性。

这也意味着，例如，如果您有多个不同的过滤器或多个变换，则给定属性的所有这些都会被动画化。