Page dynamics [2]keyframes

CSS Dynamic effect

@keyframes yes transition Upgraded version . Compared with transition, Intermediate processes can be defined , You can also set cycle playback and so on .

For basic usage , No more narratives .

Next, we will first introduce the time function of animation .

function

General , When animating, you can choose the motion curve of the animation .

ease

ease In fact, it is the preset Bezier curve . You can define common motion curves .

ease,liner,ease-in,ease-out,ease-in-out

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-YPGFG8W7-1644808716437)(…/assets/easeCompe.gif)]

cubic-bezier()

Three Bessel curves , It is a function controlled by mathematical formula .

cubic-bezier(x1,y1,x2,y2)

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-PtDxxqYE-1644808716438)(…/assets/bezier.PNG)]

(x1,y1,x2,y2) Represents two handles , Control the animation motion curve .

The following website can adjust the appropriate Bessel curve by itself

https://cubic-bezier.com/

step

Stepping The way of is common in sequence frames ,

When playing a sequence frame , You can set the pictures of the sequence as the background , Then move the position of the background picture , Achieve an animated effect .

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-NXmz3rUq-1644808716439)(…/assets/ Sequence frame .jpg)]

Move the background image by stepping , You can make the sequence frame move .

transform

In the process of animation , The most common attribute is transform. Let's introduce transform Main points .

GPU Speed up

Optimize animation , You need to reduce page redrawing and rearrangement .

The biggest impact on performance is to change the width and height of elements without breaking away from the document flow , Animation such as position movement . This will affect most other elements .

Generally speaking , Only use on the elements that need to be transformed transform To transform, you can reduce the consumption of performance .

transform3d

transform3d The most important thing is perspective , Perspective is not set , Just like the ordinary transform There's no difference .

perspective It is used to set the viewing position of perspective .

Here are the elements rotateX(45deg) Result , One has no settings perspective, One set .

nothing perspective

`````````````

200px Observation distance

100px Observation distance

As the distance gets closer , The stronger the perspective effect of elements .

matrix(a, b, c, d, tx, ty)

stay transform in , have access to matrix To transform . Through matrix operation , To change the position and size .

$$\begin{bmatrix}
a&c&e\
b&d&f\
0&0&1\
\end{bmatrix}
.
\begin{bmatrix}
x\
y\
1\
\end{bmatrix}

\begin{bmatrix}
ax + cy + tx\
bx + dy + ty\
1\
\end{bmatrix}
$$

The formula of matrix transformation is ：

x = ax + cy + tx
y = bx + dy + ty

above ;

x,y After calculation , Is the position after the transformation .

When translation is needed , You can set matrix(1, 0, 0, 1, tx, ty)

At this time , The operation becomes ：

x = x + tx
y = y + ty

tx and ty Is the value of Translation .

Other rotations , The zoom , wait , Both can pass matrix To set it up . Here is just a simple operation .

The zoom

matrix(sx,0,0,sy,0,0)  

rotate

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

The tensile

matrix(1,tan(θy),tan(θx),1,0,0)