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

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

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

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

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

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

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

.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;    }}

一二三四五六七八

效果如下:

 

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;    }}

加载中…

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

以后有时间了,再补上.

 (续)

今天无聊又写了个类似轮播展示效果的demo,注:仅仅是只能展示...

 

     
    
      
        
       
        
       
        
       
        
       
        
       
    
      
    
      
        
       
1
        
       
2
        
       
3
        
       
4
        
       
5
    
      
     

.wrap{
       width: 600px;    height: 350px;    margin: 50px auto;    box-sizing: content-box;    border: 1px solid #f00;    overflow: hidden;    position: relative;}.box{
       width: 500%;    height: 100%;    position: absolute;    left: 0;    top: 0;    overflow: hidden;    animation: lf 10s infinite ease-in-out;}@keyframes lf{
       from,to,90%{        left: 0;    }    10%,20%{
           left: -100%;    }    30%,40%{
           left: -200%;    }    50%,60%{
           left: -300%;    }    70%,80%{
           left: -400%;    }}.box li{
       width: 600px;    height: 350px;    float: left;}.box li img{
       width: 100%;    height: 100%;}.dot{
       position: absolute;    bottom: 10px;    left: 0;    width: 100%;    text-align: center;    height: 30px;}.dot li{
       display: inline-block;    width: 30px;    height: 30px;    border-radius: 50%;    text-align: center;    line-height: 30px;    background-color: #fff;    color: #666;}.it01.it01{
       animation: wf05 10s step-end infinite;}.it02{
       animation: wf01 10s step-end infinite;}.it03{
       animation: wf02 10s step-end infinite;}.it04{
       animation: wf03 10s step-end infinite;}.it05{
       animation: wf04 10s step-end infinite;}@keyframes wf01{
       from,0%{        background-color: #f00;    }    20%,to{
           background-color: #fff;    }}@keyframes wf02{
       20%{        background-color: #f00;    }    from,40%,to{
           background-color: #fff;    }}@keyframes wf03{
       40%{        background-color: #f00;    }    from,60%,to{
           background-color: #fff;    }}@keyframes wf04{
       60%{        background-color: #f00;    }    from,80%,to{
           background-color: #fff;    }}@keyframes wf05{
       80%{        background-color: #f00;    }    from,60%,to{
           background-color: #fff;    }}