标签：理解 gif css ... bottom anim over 阶段 key
今天,闲来无事去逛论坛,忽然发现了一个有意思的效果,果断上图
我擦嘞,以前听说过这种插件,但是感觉写个这个干嘛要废那么多事,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>
其实,这些结合等宽字体效果更好,但是...
以后有时间了,再补上.
标签：理解 gif css ... bottom anim over 阶段 key
原文地址：http://www.cnblogs.com/fbzs/p/6555377.html
