timing-function: steps()

animation语法

animation:name duration timing-function delay iteration-count direction

timing-function取值

timeing-function: linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier() / steps()

上面steps()不常用到却有时候非常有用，它是帧动画，其他值都是补间动画（线性动画），有时候一些动画效果必须用它才能实现，例如：今日头条，我们一般用其配合背景的变化制作一些有意思的帧动画。

steps()

steps()有两个参数，其中第一个参数是：每个关键帧之间执行次数，取值为正整数，第二个参数是：指定使用每个关键帧的起点或终点，取值为start或end，它有两个简写形式step-start相当于steps(1,start)，step-end相当于steps(1,end)。

使用

假如上面是一张200 * 800的图片，我想实现在Hover的时候从A变化到A的逐帧动画，可以用以下方法来实现：

方法一：

.way1:hover{
    /*在移上去的瞬间变成B，因为start会忽略开始帧*/
    animation: way1 2s steps(3,start);/*ABCDA*/
    animation: way1 2s steps(3,end);/*ABCA，因为end会忽略结束帧*/
}
@keyframes way1{
    0%{
        background-position: 0 0;
    }
    /*1/3{
        background-position: 0 -200px;
    }
    2/3{
        background-position: 0 -400px;
    }*/
    100%{
        background-position: 0 -600px;
        /*background-position: 0 100%;*/
    }
}

方法二：

.way2:hover{
    /*第一句*/animation: way2 2s steps(4,start);/*ABCDA*/
    /*第二句*/animation: way2 2s steps(4,end);/*ABCDA*/
    /*第三句*/animation: way2 2s steps(4,end) forwards;/*ABCDA*/
}
@keyframes way2{
    /*实现一个从A到A的动画，推荐下面这样写，这样就不用纠结用start或end了，但其实用start或end还会有一丁点区别，就是start会立即到下一帧，end则不会*/
    0%{
        background-position: 0 800px; /*A*/
    }
    /*25%{
        background-position: 0 600px; B
    }
    50%{
        background-position: 0 400px; C
    }
    75%{
        background-position: 0 200px; D
    }*/
    100%{
        background-position: 0 0; /*A*/
    }
}
/*下面这种写法和@keyframes way2是一样的*/
@keyframes way3{
    0%{
        background-position: 0 0; /*A*/
    }
    /*25%{
        background-position: 0 -200px; B
    }
    50%{
        background-position: 0 -400px; C
    }
    75%{
        background-position: 0 -600px; D
    }*/
    100%{
        background-position: 0 -800px; /*A*/
    }
}

上面.way2:hover{}中“第二句”的写法会忽略最后的100%，但一个动画执行完还是会默认回到0%，所以我们看到的还是ABCDA。“第三句”的写法比较有意思，end会忽略100%，forwards又会停在最后一帧，这时候听谁的呢？答案：forwards。虽然“第二句”和“第三句”虽然看到的结果没有任何区别，但实际动画最后一次执行的帧却不同，“第二句”会跳过100%，“第三句”则不会，为了证明这一点看一个颜色变化例子就明白了。

颜色变化例子

.test:hover{
    animation: colorChange 2s step-end;/*红绿*/
    animation: colorChange 2s step-end forwards;/*红绿蓝*/
}
@keyframes colorChange{
    0%{
        background: red;
    }
    50%{
        background: green;
    }
    100%{
        background: blue;
    }
}

利用steps()配合设计还可以作出好多有意思小东西，有兴趣可以去发掘。今日头条H5下载、倒计时

以上对steps()的分析都是从经验/测试/自己理解中得出的，非原理上的，所以可能出现不准确，发现望指正，谢谢！

.shan {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 235px;
    height: 235px;
    background-image: url(aaa.png);
    background-repeat: no-repeat;
    transform: translateZ(0);
    animation: change .5s steps(2,end) infinite;
}
@keyframes change{
    0%{
        background-position:0 0;
    }
    100%{
        background-position:-470px 0;
    }
}

使用rem不能精确到数字时，可以用关键字来定位

.box{
    height: 4.693333rem;
    background: url(./aaa.png) no-repeat left top;
    background-size: 10rem auto;
    animation: change 1.2s step-start infinite;
}
@keyframes change{
    50%{
        background-position: left bottom;
    }
}