第三十七章、闪烁动画

使用CSS动画中的animation-direction属性，可以规定在奇数或偶数或全周期逆向执行动画，并且会同时反转调速函数。利用反转效果可以实现闪烁效果，闪烁效果的本质是透明度的变化。

<div class="tip">提示文字</div>

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

1
2
3
4
5
6
7
8
9
10

使用steps()函数可以实现硬切换的闪烁，但需要对动画的关键帧进行修改。

.tip{
    animation: 1s blink 3 steps-start;
}
@keyframes blink {
    50% {
        color:transparent;
    }
}

1
2
3
4
5
6
7
8

# 第三十七章、闪烁动画