使用CSS动画中的animation-direction属性,可以规定在奇数或偶数或全周期逆向执行动画,并且会同时反转调速函数。利用反转效果可以实现闪烁效果,闪烁效果的本质是透明度的变化。
<div class="tip">提示文字</div>
.tip{
animation: .5s blink 6 alternate;
}
@keyframes blink {
to {
color:transparent;
}
}
使用steps()函数可以实现硬切换的闪烁,但需要对动画的关键帧进行修改。
.tip{
animation: 1s blink 3 steps-start;
}
@keyframes blink {
50% {
color:transparent;
}
}