Front knowledge

There are two types of timing function for animateion and transition

Cubic – Bezier curve

cubic-bezier.com/

• Ease is getting faster and slower. It’s actually similar to esae-in-out
• Linear indicates that the value of a property changes linearly at a fixed speed
• Ease-in means that the property value changes at a slower rate and then faster and faster, like a ball falling from a high place. In means fast
• Ease-out is like throwing something up. Out means slow
• Esae-in-out is slow then fast, and then it bounces back up when it drops to the ground.

steps

Bezier curves are silky animations, steps are not. They are like stairs, bezier curves are like climbing. The Steps function specifies a step function that provides teleportation capabilities. It takes two arguments

• The first parameter takes an integer value, representing a few steps between two keyframes
• The second argument has two values start or end. The default value is end.

Default values are

• Step-start is equivalent to step(1, start).
• Step-end is the same thing as step(1, end)

Steps (N, start) divides the animation into N segments. The animation takes a step at the beginning of each segment (i.e. the hollow circle in the figure → the solid circle) and stops at the NTH frame at the end of the animation

Steps (N, end) divides the animation into N segments, and the animation takes a step at the end of each segment (i.e. hollow circle → solid circle in the figure). At the end of the animation, the NTH frame has been skipped (i.e. hollow circle → solid circle in the figure) and stays at N+1 frame.

The first kind of animation

Second kind of animation

Refer to the article

• www.yuque.com/qinpengsen/…
• The source code