【前端探索】除了用gif 雪碧图怎么画动画 为什么雪碧图乱帧

项目栈：vue3+vite2

雪碧图乱帧的解决方法附在文章的最后。

.prize-box {
    overflow: hidden;
    height: 836px;
    width: 1000px; /* 一帧的宽度，即每个动画画面的宽度（包括左右的间隔区域） */
    background: url(@/assets/box-animation.png) no-repeat; /* 雪碧图资源 */
    background-size: 22000px 100%; /* 整张雪碧图的宽度，height也是雪碧图的高度 */
    animation: run 2.5s steps(22); /* 2.5为动画事件，22*1000=22000，
    即整张雪碧图有n帧的话长度就应该为n帧*每帧的宽度 */
    animation-fill-mode: forwards; /* 动画最后的画面 */
}
/* 动画run，就是从0到-22000px分成22帧去移动，达到一个gif的效果 */
@keyframes run {
    from {
    background-position: 0 0;
    }
    to {
    background-position: -22000px 0;
    }
}

下面是一张高度为2436px，宽度为4500px的雪碧图（搬运过来的，有水印），按照注释所说的对数值进行一些修改，试一下吧！！！

为什么我的雪碧图的帧是乱的，不是预期中丝滑的效果

首先得看一下设计师给你的切图是否真的是严格按照每帧等分，而且动画都在每帧的正中间，如果第一张图的左边没有空位，那肯定就是不符合规格的雪碧图！

然后，如果你也是用vite构建项目，在vite.config.js这个文件进行如下配置

...
css: {
    postcss: {
        plugins: [pxToViewport({
            mediaQuery: true
            })]
        }
    },
},
...
})