43、逐帧动画

使用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;
    }
}
43、逐帧动画_第1张图片

你可能感兴趣的:(43、逐帧动画)