探究css帧动画setps()用处

今天,闲来无事去逛论坛,忽然发现了一个有意思的效果,果断上图

我擦嘞,以前听说过这种插件,但是感觉写个这个干嘛要废那么多事,but,这家伙明显不是用的js啊,打开代码一看

what??? steps()...这是个什么鬼?

animation-timing-function是关键帧动画的动画速率函数,这我知道,但是从来没听说过steps()啊,

上网一搜,steps函数是指定一个阶跃函数,脑子就开始晕了,后面越看越晕,实在不行,直接动手写,这一写问题出来了.

我原本以为steps()中的第一个参数,是指定关键帧动画一共分几步完成,实际的情况:他妹的每个间隔分几步完成.

不懂我的意思?没关系,上代码...

<div class="box">
    <p class="p0"></p>
</div>

.box{
    box-sizing: content-box;
    border: 1px solid #000;
    display: inline-block;
    margin: 50px 50px;
    width: 100px;
}
.p0{
    width: 0px;
    height: 30px;
    background-color: #f00;
    animation: wid 5s infinite;
    animation-timing-function: steps(3,start);
}
@keyframes wid{
    0%{
        width: 0px;
    }
    100%{
        width: 100px;
    }
}

初看,没有什么问题,但是现在我们把其中的关键帧动画的设置换一下

@keyframes wid{
    0%{
        width: 0px;
    }
    60%{
        width: 100px;
    }
    100%{
        width: 0px;
    }
}

效果如下图

这么看来,就能知道,steps()的第一个参数,并不是把关键帧整个动画分成几步来执行,而是,每个阶段都分步执行.知道了这些,接下来就好理解了.

第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end,通俗点来讲:

step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画,

step-end与上面相反，都是以上一帧的显示效果来填充间隔动画,

即2个参数都会选择性的跳过前后部分，start跳过0%，end跳过100%

讲解部分,就这么多,最关键,最核心的部分就是:timing-function 作用于每两个关键帧之间，而不是整个动画.

理解了上面内容,我也模仿着写了一些小demo

demo 1:

.p0{
    white-space: nowrap;
    overflow: hidden;
    width: 8rem;
    margin: 20px auto;
    animation: wid 10s infinite,typing 1s infinite;
    animation-timing-function: steps(8,end),steps(2,end);
    /*font-family: Consolas, Monaco, monospace;*/
    font-size: 1rem;
    border-right: 1px solid transparent;
}
@keyframes wid{
    0%{
        width: 0rem;
    }
    50%{
        width: 8rem;
    }
    100%{
        width: 8rem;
    }
}
@keyframes typing{
    0%{
        border-right: 1px solid transparent;
    }
    50%{
        border-right: 1px solid blue;
    }
    100%{
        border-right: 1px solid transparent;
    }
}

<p class="p0">一二三四五六七八</p>

效果如下:

demo 2:

.p0{
    margin: 50px 50px;
    width: 90px;
    padding-left: 10px;
    height: 24px;
    border: 1px solid blueviolet;
    background-color: blueviolet;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    /*text-align: center;*/
}
.p0 span{
    vertical-align: bottom;
    overflow: hidden;
    white-space: nowrap;
    width: 14px;
    display: inline-block;
    animation: wid 2s infinite;
    animation-timing-function: steps(4,end);
}
@keyframes wid{
    0%{
        width: 0px;
    }
    100%{
        width: 14px;
    }
}

<p class="p0">加载中<span>…</span></p>

其实,这些结合等宽字体效果更好,但是...

以后有时间了,再补上.