雪碧图实现GIF效果

一、前言

关键点：

雪碧图
background-position
steps

利用background-position控制雪碧图起始位置来选择索要呈现的内容，这个已经很熟悉了。那么steps是什么？

二、animation回顾

animation-name： keyframe 名称
animation-duration：动画时间（ms或s）
animation-timimg-function：动画的速度曲线
animation-delay：动画开始之前的延迟
animation-iteration-count：动画播放的次数
animation-direction：是否轮流反向播放动画

steps()便是animation-timing-function属性中的一个取值。

不同于ease、linear等连续型函数，steps指定的是一个阶跃函数。

三、steps介绍

steps()有两个参数

第一个参数n为动画间隔数，也就是把动画分为n步进行阶段性展示；

第二个参数有两个取值，end和start

a) end为默认取值，表示第一帧是第一步动画开始

b) start表示第一帧是第一步动画结束

盗张图：

本文测试代码

<!DOCTYPE html>
<body>
    <div class="row-box-group">
        <div class="row-box">
            <div class="box-item">
                <div class="move-item move1"></div>
            </div>
            <div class="box-item">
                <div class="move-item move2"></div>
            </div>
        </div>
        <div class="row-box">
            <div class="box-item">
                <div class="move-item move3"></div>
            </div>
            <div class="box-item">
                <div class="move-item move4"></div>
            </div>
        </div>
         <div class="row-box">
            <div class="box-item">
                <div class="move-item move5"></div>
            </div>
            <div class="box-item">
                <div class="move-item move6"></div>
            </div>
        </div>
    </div>
</body>

@keyframes move {
        0% {
            background-position: 0 -0%;
        }
        100% {
            background-position: 0 -400%;
        }
    }
     @keyframes move2 {
        0% {
            background-position: 0 0;
        }      
        50%{
            background-position: 0 -200%;
        }
        100% {
            background-position: 0 -400%;
        }
    }
    
    .row-box-group {
        margin: 200px auto;
        width: 200px;
    }
    
    .row-box {
        width: 200px;
        height: 100px;
        box-sizing: border-box;
        display: flex;
    }
    
    .box-item {
        width: 50%;
        height: 100%;
        border: 1px solid #ddd;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .move-item {
        height: 35px;
        width: 32px;
        background: url(tuski.png);
    }
    
    /*不加steps*/
    .move-item.move1 {
        animation: move 400ms infinite;
    }
    /*修改steps中的数值*/
    .move-item.move2 {
        animation: move 400ms steps(4) infinite;
    }
    /*验证steps中数值目标*/
    .move-item.move3 {
        animation: move2 400ms steps(4) infinite;
    }
    
    .move-item.move4 {
        animation: move2 400ms steps(2) infinite;
    }
    /*steps中end和start的区别*/
    .move-item.move5 {
        animation: move 400ms steps(4, end) infinite;
    }
    .move-item.move6 {
        animation: move 400ms steps(4, start) infinite;
    }