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

这也意味着，如果你有，例如，多个不同的过滤器或多个变换，它们对于一个给定的属性都将是动画的。