探究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>

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

以后有时间了,再补上.

 (续)

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

 

<div class="wrap">
    <ul class="box">
        <li><img src="img/a01.jpg" alt="" /></li>
        <li><img src="img/a02.jpg" alt="" /></li>
        <li><img src="img/a03.jpg" alt="" /></li>
        <li><img src="img/a04.jpg" alt="" /></li>
        <li><img src="img/a05.jpg" alt="" /></li>
    </ul>
    <ul class="dot">
        <li class="it01">1</li>
        <li class="it02">2</li>
        <li class="it03">3</li>
        <li class="it04">4</li>
        <li class="it05">5</li>
    </ul>
</div>

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