[CSS] animation-timing-function:

1. @keyframes

CSS @keyframes，虽然已被大多数浏览器支持了，
但实际上，仍处于W3C的working draft阶段，CSS Animations Level 1。

Keyframes are used to specify the values for the animating properties at various points during the animation. The keyframes specify the behavior of one cycle of the animation; the animation may iterate zero or more times.

@keyframes 用来指定CSS动画一次循环中，多个时间节点处的CSS属性，
而CSS动画本身，可以循环0次或多次。

例如，以下CSS代码定义了一个名为test-animation的动画，
我们在它的一次循环中，指定了3个时间节点，
其中，from相当于0%，to相当于100%。

@keyframes test-animation {
    from {
        background: red;
    }

    50%{
        background: green;
    }

    to {
        background: yellow;
    }
}

2. animation

animation: name duration timing-function delay iteration-count direction fill-mode;

animation是以下多个属性的简写，

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode

例如，以下CSS代码，给正方形设置了一个背景色的渐变动画，

<div class="test"></div>

<style>
    @keyframes test-animation {
        from {
            background: red;
        }

        50% {
            background: green;
        }

        to {
            background: yellow;
        }
    }

    .test {
        width: 100px;
        height: 100px;
        background: gray;

        animation: test-animation 2s linear 0s 1 normal forwards;
    }
</style>

3. animation-timing-function

animation-timing-function 指定了@keyframes中各个节点之间的时间变化曲线。

例如，以下代码设置了animation-timing-function为steps(1)，
指的是，从from到50%过渡时，采用一段式阶跃函数，
从50%到to过渡时，也采用一段式阶跃函数。

<style>
    @keyframes test-animation {
        from {
            background: red;
        }

        50% {
            background: green;
        }

        to {
            background: yellow;
        }
    }

    .test {
        width: 100px;
        height: 100px;
        background: gray;

        animation: test-animation 2s steps(1) 0s 1 normal forwards;
    }
</style>

4. steps

steps(n, start/end)

steps指定了animation-timing-function为一个阶跃函数。

第一个参数n是一个正整数，表示阶跃次数，

第二个参数start或end，表示阶跃点，
start表示一开始就先进行阶跃，end表示每阶段完成后再进行阶跃，
默认值为end。

阶跃函数的时间曲线如下，

注：
阶跃函数steps指的是@keyframes中各环节之间的时间变换函数，
它并不是指整个@keyframes动画阶跃几次，
如果需要每个环节到下一个环节只阶跃一次，那么需要设置steps(1, start/end)。

---

参考

mdn: animation-timing-function
mdn: The steps() class of timing functions
mdn: @keframes
W3C: CSS Animations Level 1