CSS3 Animation's Steps way transition

Animation By default transitions in ease mode, which inserts motion tweens between each keyframe , so the animation effect

is consistent in nature. In addition to transition functions such as ease,linear, Cubic-bezier, they are inserted into a tween.

However, some effects do not need to be tween, only need to jump between keyframes, then you should use the steps transition mode.

For example, GIF motion diagram does not support program control of playback, nor does it support alpha channel. But if we use a

PNG Pictures, put all the frames together, through the CSS3 animation control background-position

You can do this by playing it.

    <style>    @-webkit-keyframes Test {      0% {background-position:0px-0%;}      100% {background-position:0px-400%;}    }    @keyframes Test {      0% {background-position:0px-0%;}      100% {background-position:0px-400%;}    }    div {      height:35px;width:32px;      -webkit-animation:test 400ms Steps (4) infinite;      Animation:test 400ms Steps (4) infinite;      Background:url (http://www.web-tinker.com/share/. png);    }    </style>    <div></div>

Steps (4) indicates that the entire animation is toggled between 4 keyframes. The picture of this bunny rubbing face

Contains 4 frames, so this is set to 4. And our animation duration is 400ms, which means that each frame

Stay 100ms, this is the same effect as the normal GIF motion diagram. and animation can

Control playback State, PNG can provide alpha channel. But animation the compatibility of this thing

It is still not well, and it remains to be seen whether it can be used for formal projects.

CSS3 Animation's Steps way transition