44、闪烁动画

2017-06-27  本文已影响0人  Elevens_regret

使用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;
    }
}
上一篇下一篇

猜你喜欢

热点阅读