This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021.

preface

This article mainly introduces another important attribute transition of CSS3 animation and the essential attribute transform to achieve complex animation effects and the principle of transformation.

transition

Transition provides a way to animate CSS properties as they change, making them a process that takes place over a period of time rather than immediately, making style changes smoother.

With Transition, the beginning and end states are specified by the designer, and the intermediate states are automatically completed by the browser, called implicit transitions.

The transition of the property

Transition provides properties that control the implementation of animations:

  • transition-property: Specifies the property that applies the transition effect. This property must be animated, including top, margin, opacity, etc. (Properties that have animation properties), or you can set it toall“, which takes effect for all properties with animation features.
  • transition-duration: Specifies the duration of the transition effect.
  • transition-timing-function: Define the rhythm of the transition (see details)CSS animation)
  • transition-delay: indicates the delay time before the transition effect begins.

Property and Duration must be set for transition animation.

Transition is actually the rule that defines which properties should be animated by transition, and which properties should be animated by transition. The actual animation is triggered when the CSS properties specified on the element change.

Transition Event Listener

The event of Transition is relatively simple. Unlike animation, which has animationStart, AnimationEnd and other events, transition only has transitoinend events.

el.addEventListener("transitionend", eventHandler, true);
Copy the code

transform

The transform property can implement some transformation operations on elements, such as rotation, scaling, tilt, translation, etc., by modifying the coordinate space of the CSS visual formatting model.

The value of transform is one or more transform-functions. Transform-function An equation describing the transformation of an element, usually represented by a matrix, and the transformed element can be obtained by matrix multiplication of each element point.

Before we understand the transformation equation, we need to understand cartesian and homogeneous coordinates (and this may require some mathematics), which is a way of describing the geometry of space.

Cartesian coordinate system

Cartesian coordinate system is divided into two-dimensional coordinate system and three-dimensional coordinate system. Two-dimensional coordinate system is usually used to describe two-dimensional plane graphics, while three-dimensional coordinate system is usually used to describe three-dimensional geometry, which corresponds to the 2D and 3D deformation of DOM elements.

Cartesian coordinates in two dimensions

The coordinates of each point of a graph in a two-dimensional Cartesian coordinate system are represented by (x,y) (x,y) (x,y).

Let’s assume that the transformation matrix of a transformation 2 X 2 is:

Linear transformation can be carried out by multiplying the transformation matrix of points in space, while the geometric image is composed of countless points with (x,y)(x,y)(x, Y) coordinates. Each point is subjected to a certain linear transformation, and the whole image will be deformed. CSS transform-function defines such a transformation matrix.

So in this formula, (x,y) is the point in our graph, and you can see that the linear transformation gives you a new point ax+cy,bx+dy, times Ax +cy,bx+dy.

However, the Cartesian coordinate system can only carry out transformation, but not the translation of the image. The translation of all graphs requires additional calculation: If the translation distance is (x1,y1)(x1,y1)(x1,y1), then at the transformed point, plus (x1,y1)(x1,y1), Can get the final point (ax + cy + x1, bx + dy + y1) (ax + cy + x1, bx + dy + y1) (ax + cy + x1, bx + + y1 dy).

Cartesian coordinates in three dimensions

If you understand the transformation of a two-dimensional coordinate system, the transformation of a three-dimensional coordinate system is easy. The situation in 3D is similar to that in 2D. When linear transformation is carried out, it needs to be multiplied by a 3X3 third-order transformation matrix. Suppose a third-order transformation matrix is:

The point (x,y,z)(x,y,z)(x,y,z) multiplied by the transformation matrix in space can be linearly transformed. Compared with the two-dimensional coordinate, the three-dimensional coordinate has a z-value, and the transformation also has a z-axis transformation.

Similarly, a cartesian transformation does not represent a translation, which requires additional computation, assuming that the translation is x1,y1,z1 (x1,y1,z1) (x1,y1,z1).

We get the final point as: (a1x+b1y+c1z+x1,a2x+b2y+c2z+y1,a3x+b3y+c3z+z1) (a1x+b1y+c1z+ y1,a3x+b3y+c3z+z1) (a1x+b1y+c1z+x1,a2x+b2y+c2z+ z1 + y1, b3y a3x + + c3z + z1).

Homogeneous coordinate system

From the cartesian coordinate system, we know that cartesian coordinate system requires extra processing for translation, and homogeneous coordinate system can solve this problem very well.

In the homogeneous coordinate system, the point (x0,y0) (x0,y0) (x0,y0) (x0,y0) in the Cartesian coordinate system is expressed as (x,y,w) (x,y,w) (x,y, W), where WWW is not equal to 0, (w=0w=0w=0 w=0 is the vector, X,y,0 (x,y,0 (x,y,0), we’re just going to focus on the representation of the point.

X /w=x0x/w =x0x/w =x0, y/w=y0y/w=y0y/w=y0, which means that cartesian coordinates and homogeneous coordinates are interchangeable. For the sake of subsequent processing, we assume that w=1w=1w=1, i.e., the homogeneous coordinate (x,y,1) (x,y,1).

Two dimensional homogeneous coordinate system

Now assume that our 3X3 third-order transformation matrix is:

Now this transformation matrix can compute the linear transformation and translation, where x1, y1 is the translation, and we multiply it by the homogeneous coordinate (x,y,1) (x,y,1) (x,y,1) :

The final point is ax+cy+x1,bx+dy+y1,1 (Ax +cy+x1,bx+dy+y1,1) (Ax +cy+x1,bx+dy+y1,1), which is our transformation point, and we can see that it’s both linearly transformed and shifted.

Three dimensional homogeneous coordinate system

Similarly, there is only an extra z-axis in 3d, so the point of the 3d homogeneous coordinate system is expressed as (x,y, Z,w) (x,y, Z,w) (x,y, Z,w), let w=1w=1w=1, that is, the coordinate is (x,y, Z,1) (x,y, Z,1).

Meanwhile, our linear transformation matrix should be of 4X4 order:

The results of three-dimensional transformation can be obtained by matrix multiplication:

(a1x+b1y+c1z+x1,a2x+b2y+c2z+y1,a3x+b3y+c3z+z1,1) (a1x+b1y+ C1z +x1,a2x+b2y+c2z+y1,a3x+b3y+c3z+z1,1) : (a1x + b1y + c1z + x1, a2x + + c2z b2y + y1, a3x + b3y + c3z + z1, 1)

transform-function

After the above understanding of linear transformation and coordinate system, we can look at the transform-function of CSS to understand it in principle. The description of the space position of elements in CSS can be understood as using homogeneous coordinate system.

matrix()

Two-dimensional transformation matrix:

Matrix (a, b, C, D, x1, y1) 6 parameters, where A, b, C, D represent the linear transformation coefficient, x1, y1 represent the translation.

Is the transformation matrix:

matrix3d()

Represents a three-dimensional transformation matrix

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4))

16 parameters, among which A4, B4 and C4 are translation, and the rest are linear transformation coefficients.

In addition to these two basic transformation functions, CSS also provides function keywords converted from these two basic transformation functions that are easier to use:

  • The perspective () : the perspective.
  • Rotate () and rotate3D () : Rotation and 3D rotation.
  • Scale () and scale3D () : Scale and 3D scaling.
  • Skew () : stretch.
  • Translate and translate3D: Translation and 3D translation.

For the use of these keyword functions, please refer to the official website (transform-function) for detailed introduction, which will not be repeated here.

transform-origin

In addition, there is an important attribute transform-Origin.

This CSS property allows you to change the origin of an element’s deformation.

The default deformation origin of an element is the center of the element. Once the position of the deformation origin changes, the final deformation effect will be different.

conclusion

The transition property and transform property have a better understanding of how to use the transition property and transform property, so let’s start making cool animations.