使用CSS动画中的steps()调速函数代替贝塞尔曲线的调速函数,可以实现动画在关键帧之间硬切换的效果。
将一张loading的gif图的几个关键帧切出来组合成一张图片,将图片当做背景进行背景移动的动画,可以达到gif图的效果。
.tip{
background: url("loader.png") no-repeat;
animation: 1s blink infinite steps(8); // 整个动画将只展现8个关键帧
}
@keyframes blink {
to {
background-position: -800px 0;
}
}
网友评论