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類的屬性，並且通常將函數接受為值。

這也意味着，例如，如果您具有多個不同的濾鏡或多個變換，則將對給定屬性的所有它們進行動畫處理。