css实现帧动画

一般项目里面需要用的类似gif动效的地方，我都是让ui直接切好图片给我的，要是他们知道可以用css实现会不会打死我(逃…

话不多说，先上图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1wCGc8l-1653371944949)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9af97a8022144f7a0b140dc016a0813~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]，这两个动画都是纯css实现的哦，甚至没有js的参与，是不是如丝滑般流畅…

下面我们来分析一下如何实现css帧动画

1. 巧妇难为无米之炊，我们需要类似这张的，当然还是需要ui小姐姐帮忙了

2. 让他动起来的原理，利用 keyframes，修改背景图的 background-position

以手机滑动的那个demo为栗子

<div class="animation2"></div>

.animation2 {
    width: 280px; // 这个宽度一般是素材里面单个元素的宽度
    height: 340px; // 素材的高度，例如本素材尺寸为 13440 * 340，则这边高度为340
    background-image: url('./guide.png');
    background-size: auto 340px; // 背景图宽度自适应，高度为素材高度
    animation: