闪烁效果

场景

通过数次闪烁（通常不超过三次）来提示用户界面中有某些变化

• 对整个元素闪烁（opacity）
• 对文字颜色闪烁（color）
• 对边框进行闪烁（border-color）

解决方案

@keyframes blink {
    50% { color: transparent; }
}
.box {
    animation: blink .5s 6 alternate;
}

文字可以平滑地从原来的颜色淡化到透明色，但随后会生硬地跳回原来的颜色

使用 animation-direction 解决

• normal：默认值
• reverse：反转每一个循环周期
• alternate：反转第偶数个循环周期
• alternate-reverse：反转第奇数个循环周期

可以使用 alternate 解决上面问题，但要把循环次数翻倍，那么减半一个周期的时间，就可以刚好达到 3s

@keyframes blink {
    50% { color: transparent; }
}
.box {
    animation: blink .5s 6 alternate;
}

还可以通过 steps() 完成，虽然动画不平滑，但闪烁效果更明显

@keyframes blink {
    to { color: transparent; }
}
.box {
    animation: blink 1s 3 steps(2);
}

可以看到，第一步是在 from（原来颜色），第二步在 50%（半透明），但我们希望的是原来颜色和透明色之间的切换，所以改变落点，并只有一步，即为以下代码

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

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