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为栗子

.animation2 {
    width: 280px; // 这个宽度一般是素材里面单个元素的宽度
    height: 340px; // 素材的高度，例如本素材尺寸为 13440 * 340，则这边高度为340
    background-image: url('./guide.png');
    background-size: auto 340px; // 背景图宽度自适应，高度为素材高度
    animation: swiper 1s steps(48, start) 0ms infinite normal backwards;
    margin-top: 42px;
}

@keyframes swiper {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -13440px 0; // 从图片负边移动实现动画效果
    }
} 

分别说一下animation各属性的涵义

animation: swiper 1s steps(48, start) 0ms infinite normal backwards;

animation-name: swiper; /* keyframes动画的名称 */
animation-duration: 1s; /* 动画持续时间 1s */
animation-timing-function: steps(48, start); /* 动画函数，分48步执行，每一帧显示帧结束时的状态，此处写48是因为素材里面的完整动作就是分为48个小png */
animation-delay: 0ms; /* 延迟多长时间后开始执行动画 */
animation-iteration-count: infinite; /* 动画执行无限次 */
animation-direction: normal; /* 是否应该轮流反向播放动画 normal/alternate */
animation-fill-mode: backwards; /* 会在向元素应用动画样式时迅速应用动画的初始帧 */