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

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