44、闪烁动画

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

提示文字
.tip{ animation: .5s blink 6 alternate; } @keyframes blink { to { color:transparent; } }
44、闪烁动画_第1张图片

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

.tip{
    animation: 1s blink 3 steps-start;
}
@keyframes blink {
    50% {
        color:transparent;
    }
}
44、闪烁动画_第2张图片

你可能感兴趣的:(44、闪烁动画)