Page 242 - css揭秘

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

.highlight {
animation: .5s blink-smooth 6 alternate;
}

图 8-19
animation-direction 属性接
受的值共有四个，本图以一段从
black 变化到 transparent 并循
环三次的动画为例，展示了这四
个值各自对动画的作用效果

请注意，我们必须把动画循环的次数翻倍（而不是像前面的方法那样把
循环周期的时间长度翻倍），因为现在一次淡入淡出的过程是由两个循环周
期组成的。基于同样的原因，我们也要把 animation-duration 减半。

如果我们想得到的是一个平滑的闪烁动画，现在就可以收工了。不过，
假如我们只想得到最普通的那种闪烁效果呢？应该如何实现？我们首先想到
的办法可能是：

@keyframes blink { to { color: transparent } }

.highlight {
animation: 1s blink 3 steps(1);
}

但是，这个尝试会华丽地失败：什么动静也没有。原因在于，steps(1)
本质上等同于 steps(1, end)，它表示当前颜色与 transparent 之间的过
渡会在一次步进中完成，于是颜色值的切换只会发生在动画周期的末尾（参
见图 8-20）。因此，我们会看到起始值贯穿于整个动画周期，而终止值只在
动画结尾的无限短的时间点处出现。如果我们改用 steps(1, start)，结果
就完全相反了：颜色值的切换会发生在动画周期最开始，于是我们始终只能
动画进度
看到纯透明的文字，没有任何动画或闪烁效果。

以这个逻辑来看，我们接下来可以换用 steps(2) 来碰碰运气，两种步 时间
进方式（start 或 end）都可以试一下。现在我们终于可以看到闪烁效果了， 图 8-20
但这个闪烁效果要么是由半透明切到纯透明，要么是由半透明切到实色，原 实际上 steps(1) 对动画的作用
因同上。由于我们无法通过配置 steps() 来让这个切换动作发生在动画周期 结果是这样的
的中间点（只能发生在起点或终点），唯一的解决方案是调整动画的关键帧，
让切换动作发生在 50% 处，就像我们在本节刚开始所做的那样：

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

.highlight {

44 闪烁效果 211

඀ࠡ JOEC