Explore the usefulness of CSS frame animation Setps ()

Today, free to go to the forum, suddenly found an interesting effect, decisive

I wipe, I have heard of this plug-in, but feel write this why to waste so much, but, this guy is obviously not with the JS Ah, open code a look

What??? Steps () ... What the hell is this?

Animation-timing-function is the animation rate function for Keyframe animations, which I know, but never heard of steps () Ah,

A search on the Internet, steps function is to specify a step function, the brain begins to faint, behind the more see dizzy, really not, directly to write, this writing problem came out.

I originally thought that the first parameter in steps () was to specify the Keyframe animation to complete in a few steps, the actual situation: his sister's every interval is divided into several steps to complete.

Don't know what I mean? It's okay, on the code ...

<class= "box">    <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; }}

At first glance, there is no problem, but now let's change the setting of the Keyframe animation

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

Effects such as

In this way, it is possible to know that the first parameter of steps () does not divide the entire animation of the keyframe into a few steps, but rather that each stage is executed in step. Knowing this, it's good to understand.

The second parameter is optional, accepting the start and end two values, specifying a step change at the beginning or end of each interval, the default is end, the popular point is:

Step-start in the process of change, are the following frame of the display effect to fill the interval animation,

Step-end, in contrast to the above, is the display effect of the above frame to fill the interval animation,

That is, 2 parameters will be selective skip the front and back parts, start skip 0%,end Skip 100%

The explanation section, so much, the most critical, the core part is:timing-function action between every two keyframes, rather than the entire animation.

Understand the above content, I also imitate to write some small 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; }}

<class= "P0"> 12345678 </p>

The effect is as follows:

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

<class= "P0"> load <span>... </ span ></ P >

In fact, these combinations of equal width font effect better, but ...

There is time in the future, then fill it up.

Explore the usefulness of CSS frame animation Setps ()