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

Question

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

动画本身简单且准备就绪：

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

问题是在哪里放置以下代码，以便将动画应用到文本 A 和文本 B：

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

JSFiddle（文本模糊，但上面引用的 unblur-code 还没有在 fiddle 中）。

更新：已解决。谢谢！

Answer 1

因为您已经将 blur_filter class 应用于 TEXT A 和 TEXT B 元素，您可以简单地将这些动画属性写入 class 中。

试试这个：

.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 class

.blur_filter {
 animation: unblur 3s;
}

示例如下Fiddle Link

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

Applying CSS animation to text - how to do it properly?

css

blur

css-animations