CSS 揭秘(8)--闪烁效果

Posted by liveipool on February 9, 2017

闪烁效果

有一种常见的用户体验设计手法,就是通过数次闪烁(一般不超过三次)来提示用户界面中某处发生了变化,可以有效地把用胡的注意力引导到某个特定区域。
用CSS动画确实可以实现各种类型的闪烁效果,比如对整个元素进行闪烁(opacity),对文字的颜色进行闪烁(color),对边框进行闪烁(border-color)等等。
下面我们讨论一下文字的闪烁:

@keyframes blink-smooth {to {color: transparent;}}
.highlight {animation: 1s blink-smooth 3;}

上面这种写法虽然比较生硬,但也能实现大致的效果了。(会平滑地从原来的颜色变为透明色,接着直接跳回原来的颜色。)
我们用图形的方式来表示文字颜色随时间的变化:
44.1.png

因此,我们将transparent值设在50%的时候:

@keyframes blink-smooth {50% {color: transparent;}}
.highlight {animation: 1s blink-smooth 3;}

这样原色和透明色的两次转换都比较平滑了。

如果我们还想要一点别的效果,还可以使用animation-direction。这个属性的唯一作用就是反转每一个循环周期(reverse),或第偶数个循环周期(alternate),或第奇数各循环周期(alternate-reverse)。

各值的图形化对比:
44.2.png

因此,可以写为:

@keyframes blink-smooth {to {color: transparent;}}
.highlight {animation: .5s blink-smooth 6 alternate;}

另外,还可以用steps()来实现,不过效果也不会偏差太大。

@keyframes blink-smooth {50% {color: transparent;}}
.highlight {animation: 1s blink-smooth 3 steps(1);}