CSS3 timing-function: steps() introduction_html/css_WEB-ITnose

When applying CSS3 gradient/animation, there is an attribute that controls the time. In addition to the commonly used cubic Bezier curve, its value also has the steps() function.

The steps function specifies a step function. The first parameter specifies the number of intervals in the time function (must be a positive integer); the second parameter is optional and accepts two values: start and end, specified in The starting point or end point of each interval undergoes a step change, and the default is end.

#demo { animation-iteration-count: 2;//动画重复两次 animation-duration: 3s;//每次动画持续时间为3s }

We apply steps(3, start) and steps(3, end) to it respectively, and make the step function curve as follows:

1. Take steps(3, start)

The first parameter divides the animation into three parts. The second parameter "start" specifies that the step change occurs at the beginning of each part, which is the solid circle in the figure. The animation process is: state at 1/3 → state at 2/3 → final state.

Here is the simplest demo, which changes a box from red to white in 5 steps. In this demo you can see that the final status is white: http://runjs.cn/detail/mqbdpite

2. Take steps(3, end)

Different from steps(3, start), the animation process is: initial state→1/3 state→2/3 state. In other words, the defined final state will not be displayed, but the state of the 1/3 time period before the end will be displayed. We also observe through the demo: http://runjs.cn/detail/77frfllv. It also changes from red to white, but the final state is not white.

The demo in the attachment is a combination of "Sprite" (see link http://km.oa.com/group/23033/articles/show/226032) and steps() to realize the animation of a little boy running. .

@keyframes animate {  to { background-position: -3420px; }}.kai.animate { animation: animate 0.75s steps(19) infinite; }

The complete effect of the animation is to divide this picture 19 times within 0.75s (there are exactly 19 movements of the little boy on the Sprite picture) , moves 3420px (the width of the image) horizontally to the left.

Go download the attachment and let your boy run.

Copyright Statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.