Page 241 - css揭秘

解决方案

用 CSS 动画确实可以实现各种类型的闪烁效果，比如对整个元素进行
闪烁（通过 opacity 属性），对文字的颜色进行闪烁（通过 color 属性），
对边框进行闪烁（通过 border-color 属性），等等。在下面的内容中，我
们将只讨论文字的闪烁效果，因为这是最常见的需求。不过，我们介绍的原
理同样适用于元素其他部分的闪烁效果。
要实现一个平滑的闪烁效果其实很简单。我们迈出的第一步可能是这
样的：

@keyframes blink-smooth { to { color: transparent } }

.highlight { animation: 1s blink-smooth 3; }

这基本上成功了。这段文字可以平滑地从它原来的颜色淡化为透明色，
但随后会生硬地跳回原来的颜色。我们把文字颜色随时间发生的变化用图形
的方式记录下来（参见图 8-18），有助于我们接下来的分析。

图 8-18
这段文字的颜色在三秒钟（三个
循环周期）内的变化过程
这可能正是我们预先设想的效果。如果是这样的话，那就大功告成了！
但如果我们希望文字颜色的变化不仅是平滑隐去的，同时还是平滑显现的，
那就还得继续努力一番。为了达到这个结果，我们想到了一个办法：修改关
键帧，让状态切换发生在每个循环周期的中间。

@keyframes blink-smooth { 50% { color: transparent } }

.highlight {
animation: 1s blink-smooth 3;
}

现在它似乎就是我们所期望的效果了。不过这里还有一个问题，虽然
在这个特定的动画中表现得不是很明显（因为颜色或透明度的过渡很难体
现出各种调速函数的特征），但我们心里一定要明白：这个动画一直是处在
加速过程中的，不论是在文字显现还是隐去时——这对某些动画来说可能
会显得不太自然（比如类似脉搏跳动的动画）。在那种情况下，我们可以从
工具箱中请出另一件法宝：animation-direction。

animation-direction 的 唯 一 作 用 就 是 反 转 每 一 个 循 环 周 期
（reverse），或第偶数个循环周期（alternate），或第奇数个循环周期
（alternate-reverse）。它的伟大之处在于，它会同时反转调整函数，
从而产生更加逼真的动画效果。我们可以把它用在需要闪烁的元素上，
比如：

210 第 8 章 过渡与动画

඀ࠡ JOEC