飞行文本焦点 - 模糊到清晰的动画答案

【问题标题】：Flying Text Focus - Blurry to Crisp animation飞行文本焦点 - 模糊到清晰的动画
【发布时间】：2013-10-31 19:29:36
【问题描述】：

我有一些文本从 0 不透明度到 1 左右设置动画，以便它在移动时淡入。我想添加一个模糊动画来给人一种文本正在向我们移动的印象。不知道该怎么做。

var $activeText = $(".active-text");

// the following is loop'd

$activeText.animate({opacity:1, left: '5%'}, 4000, 'swing').animate({opacity: 0}, 1000);

是否可以同时运行模糊动画或焦点？我还没有找到这样做的图书馆。 $activeText 也是文本，而不是图像。

干杯

编辑

我试过这个：

$activeText.animate({opacity:1, left: '5%', textShadowBlur: 0}, 4000, 'swing').animate({opacity: 0, textShadowBlur: 20}, 1000);

但它不起作用，grrr

【问题讨论】：

标签： text jquery-animate focus blur

【解决方案1】：

我最终发现最好的方法是使用 text-shadow 并给它一个高传播。当它消失时，它会产生模糊的效果。

CSS

text-shadow: 0 0 0.3em white;

据我所知，没有办法为文本阴影设置动画。

【讨论】：