将CSS动画应用于文本-如何正确执行？

Question

如何正确地将动画应用于文本A和文本B，以使它们逐渐从blurred变为非模糊？

动画本身简单易用：

@keyframes unblur {
from { filter: blur(6px); }
to { filter: blur(0); }
}

问题是要放置以下代码的where，以便将动画应用于文本A和文本B：

animation-name: unblur;
animation-timing-function: linear;
animation-duration: 1.2s;

JSFiddle（文本是模糊的，但是上面引用的unblur代码还没有出现在小提琴中）。

更新：已解决。谢谢！

Answer 1

由于已经将blur_filter类同时应用于TEXT A和TEXT B元素，因此您只需在类内编写这些动画属性。

尝试此：

.blur_filter {
 animation-name: unblur;
 animation-timing-function: linear;
 animation-duration: 1.2s;
}
@keyframes unblur {
 from { filter: blur(6px); }
 to { filter: blur(0); }
}

Answer 2

将此行放入CSS并删除过滤器：blur（6px）;来自.blur_filter类

.blur_filter {
 animation: unblur 3s;
}

这里是示例Fiddle Link