Shulou(Shulou.com)06/01 Report--

This article is about how to use the steps function in the animation attribute. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

First, not only continuous changes are called animation.

I had a misconception a long time ago that only continuous changes are called animation; the effect of half a step with a smile is not animation.

Only later did I realize that as long as there is a track to follow, even if it appears to be intermittent to the naked eye, it is actually animation.

For example, the existing material is as follows:

Which of the following two graphic changes belongs to the animation effect?

The answer is: both.

If we change the material, we will know that discontinuous graphic changes are also animations.

The effects are continuous rotation and intermittent rotation, respectively.

The latter picture shows the effect of discontinuous changes, but the correct chrysanthemum loading effect in our actual project.

The key to the implementation is the steps () function that this article will introduce in depth.

Introduction of the steps () function character in one sentence

The steps () function can make the animation discontinuous.

III. The status of steps () in CSS3 animation

The steps () function has the same status and function as the cubic-bezier () function in CSS3 animation, and can be used as the attribute value of animation-timing-function.

It's just that steps () is more like a staircase ramp, and cubic-bezier () is more like an accessible ramp. The following figure shows:

Then steps () simplifies the keywords step-start and step-end; cubic-bezier () has linear,ease,ease-in,ease-out and ease-in-out.

Cubic-bezier refers to the cubic Bezier curve, which can be found in my previous article, "deeply mastering the Bezier curve instruction of SVG path path".

Steps () refers to gradual movement, which is described in more detail below.

4. Find out the start and end in steps ()

Steps () has a certain degree of learning difficulty, always confused, the most important thing is that start and end are foolishly confused. Let me challenge myself here and see if I can make myself clear.

Examples of common steps () usage:

Steps (5, end); steps (2, start)

The syntax of steps () is as follows:

Steps (number, position)

Where:

Number

Numerical value. This is easy to understand, indicating how many segments our animation has been divided into.

Suppose you have the following CSS3 animation keyframes, which defines a displacement from 0~100px:

@ keyframes move {0% {left: 0;} 100% {left: 100px;}}

Assuming that our number is 5, it is equivalent to dividing the moving distance into 5 segments, as shown in the following diagram:

Position

Keyword. Indicates whether the animation is continuous from the beginning or the end of the time period. The keywords start and end are supported, and the meanings are as follows:

Start: means to start directly.

End: it comes to an abrupt end. Is the default value.

Why is position so hard to understand?

I think there are two reasons:

Steps () belongs to timing function, that is, the function of time. Time is virtual, invisible, untouchable and weak in association, so the cognitive cost is high. That's why so many people don't cherish time-they can't feel it.

The definition of start and end in the CSS specification is based on mathematical functions, functions, nightmares of how many people, because they are too abstract to be associated with reality, so, if we stare at the definition to understand start and end, it is a dead end, there is no turning back, even if we understand it now, we will meet again after a period of time, come on, forget all about it, and the ghost will remember which one is the function graph. The following figure is from the specification document:

The detailed explanation according to the specification diagram is as follows:

Start: means to start directly. That is, the time has just begun, and a distance has already been executed. Therefore, the five segmentation points of the animation are the following five, and the starting point is ignored because the time goes directly to the second point at the beginning:

End: it comes to an abrupt end. That is, as soon as the time ends, the current distance displacement stops. Therefore, the five segmentation points performed by the animation are the following five, and the end point is ignored because there is no time to execute the end point:

Re-understand position based on reality perception!

All things are relative. For example, the human movement in the eyes of flies is slow motion, but the flies in human eyes are very agile.

Similarly, the beginning and end of start and end are relative to time, but when it comes to specific things that humans can perceive, start and end have the opposite meaning.

So, we can understand it like this:

Start: indicates the end. At the end of the segment, time begins to go. Therefore, the five segmentation points performed by the animation are the last five points:

End: indicates start. At the beginning of the segment, time goes with it. Therefore, the five segmentation points performed by the animation are the first five points:

Remember the meaning of the position parameter

Keep in mind this sentence: everything is backwards! Start is not the beginning, but the end; end is not the end, but the beginning.

5. Step-start and step-end

Step-start and step-end are the simplification keywords of the steps () function. Note that it is step-*,step, followed by no s.

Where step-start is equivalent to steps (1, start) and step-end is equivalent to steps (1, end) or steps (1).

Step-start and step-end interpret it in Chinese short sentences: if one step and delay are in place, what is the role in the actual project?

For animations with only 0% focus 100% or from, to two key time frames, step-start and step-end have no reason to use them.

If it is a ladder animation that is not equally divided and cannot be transitioned, it is useful, such as the following box-shadow-based dotting animation effect:

Order is being submitted

The core code for the implementation is as follows (this dotting method ranks 3rd at most in pure CSS dotting animation. For more information, please see the introduction and guidelines of this article):

Order submission. Dotting {display: inline-block; min-width: 2px; min-height: 2px; margin-right: 8px; box-shadow: 2px 0, 6px 0, 10px 0; animation: dot 4s infinite step-start both;} @ keyframes dot {25% {box-shadow: none;} / * 0 points * / 50% {box-shadow: 2px 0 } / * 1 point * / 75% {box-shadow: 2px 0, 6px 0;} / * 2 points * /} VI, steps () and fill mode animation-fill-mode

Animation-fill-mode sometimes affects the breakpoint behavior of steps (), such as the following statement:

Animation: move 5s forwards steps (5, end)

The animation is performed only once, because the infinite infinite loop is not set, and forwards means "front", but it is also contrary to the actual performance, that is, the element maintains the last state of the animation Keyframe at the end of the animation. As a result, the following six segment points are executed, and the entire animation stops at the sixth segment point.

This is obviously not what we want, how to deal with it?

You can reduce the number of segments and the span of the animation motion by adjusting as follows:

@ keyframes move {0% {left: 0;} 100% {left: 80px;}}

That is, the original destination 100px is changed to 80px, and the call to CSS is changed to:

Animation: move 5s forwards steps (4, end)

That is, the original steps (5, end) is changed to steps (4, end), and the last 100% of this frame can be given to forwards!

Thank you for reading! This is the end of the article on "how to use the steps function in the animation attribute". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.