Using CSS3 to achieve transition and animation effects

Why should we use CSS animation to replace JS animation?

There are two main reasons for low JavaScript efficiency: manipulating the DOM and using page animation.

Usually we frequently operate DOM and CSS to achieve visual animation effects. Two factors that lead to low JS efficiency are included. When frequently operating DOM and CSS, the browser will constantly reflow and repaint. In PC version browsers, because the available memory of the browser is relatively large, users can hardly see the repaint and reflow caused by page animation with their naked eyes, so engineers almost don't need to consider the performance issues caused by animation too much. However, it is very different on mobile devices. The memory allocated to the built-in browser of mobile devices is not as considerable as that of PC version browsers. Currently, the best support for CSS3 is the webkit browser. Among the browsers with webkit kernel, the first is Safari and the second is Chrome.

Benefits of using CSS3 animation instead of JS simulation animation:

• Does not occupy the JS main thread;
• Can take advantage of hardware acceleration;
• The browser can optimize animations (no animation when the element is not visible to reduce the impact on FPS)

CSS3 animation provides 2D, 3D and regular animation attribute interfaces. It can work on any attribute of any element on the page. CSS3 animation is written in C language and it is a system-level animation.

Whether to use js animation or css3 animation requires developers to make different choices based on different needs, but a basic principle should be followed: if you need to do 2D animation, you must use CSS3 transition or animation

The differences between CSS3 animation and JavaScript simulation animation are as follows:

• CSS 3D animation cannot be implemented in js
• CSS3 3D animation is a very powerful feature in CSS3. Because it works in a three-dimensional space, js cannot simulate 3D animation like CSS3.
• CSS 2D matrix animation is more efficient than js matrix animation using margin, left, and top.
• CSS3's 2D animation refers to the change of the 2D matrix Transform. Of course, js cannot perform deformation animation. Take coordinate animation for example, using CSS3 transform to do translateXY animation is nearly 700mm faster than position left and position right in js! And it is also much smoother visually than js animation.
• The efficiency of other common animation properties of CSS3 is lower than that of js-simulated animations.
• The regular animation properties here refer to: height, width, opacity, border-width, color

CSS3 Properties

2D Transformations

CSS3 transformations can move, scale, rotate, stretch, or lengthen elements.

The transform attribute applies to elements that are transformed in 2D or 3D

transform-origin attribute, set the position of the transformed element

1. The translate() method moves from the current element position according to the parameters given by the left (X axis) and top (Y axis) positions.

div {
  transform: translate(50px,100px);
  -webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

2.rotate() method, rotates the element clockwise at a given degree. Negative values ​​are allowed, which rotate the element counterclockwise.

div {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg); /* Safari and Chrome */
}

3. scale() method, the size of the element increases or decreases, depending on the width (X axis) and height (Y axis) parameters

div {
    -webkit-transform: scale(2,3); /* Safari /
    transform: scale(2,3); / Standard syntax*/
}

4.skew([,]) contains two parameter values, which represent the tilt angles of the X-axis and Y-axis respectively. If the second parameter is empty, the default value is 0. A negative parameter indicates tilting in the opposite direction.

div {
    transform: skew(30deg,20deg);
    -ms-transform:skew(30deg,20deg); /* IE 9 /
    -webkit-transform: skew(30deg,20deg); / Safari and Chrome */
}

3D Transformation

 translate3d(x,y,z) defines a 3D translation.
translateX(x) defines a 3D translation, using values ​​for the X axis only.
translateY(y) defines a 3D translation, using values ​​for the Y axis only.
translateZ(z) defines a 3D translation, using values ​​for the Z axis only.
scale3d(x,y,z) defines a 3D scaling transformation.
scaleX(x) defines a 3D scaling transformation by giving a value along the x-axis.
scaleY(y) defines a 3D scaling transformation by giving a value along the Y axis.
scaleZ(z) defines a 3D scaling transformation by giving a value along the z axis.
rotate3d(x,y,z,angle) defines a 3D rotation.
rotateX(angle) defines a 3D rotation about the X axis.
rotateY(angle) defines a 3D rotation about the Y axis.
rotateZ(angle) defines a 3D rotation about the Z axis.
perspective(n) Defines the perspective view of a 3D transformed element.

CSS3 Transitions

transition shorthand property, used to set four transition properties in one property.
transition-property Specifies the name of the CSS property to which the transition applies.
transition-duration defines how long the transition effect takes. The default is 0. transition-duration: 5s;
transition-timing-function specifies the timing curve of the transition effect. The default is "ease".
    linear specifies a transition effect that starts and ends at the same speed (equivalent to cubic-bezier(0,0,1,1)).
    ease specifies a transition effect that starts slowly, then speeds up, and then ends slowly (cubic-bezier(0.25,0.1,0.25,1)).
    ease-in specifies a transition effect that starts slowly (equivalent to cubic-bezier(0.42,0,1,1)).
    ease-out specifies a transition effect that ends slowly (equivalent to cubic-bezier(0,0,0.58,1)).
    ease-in-out specifies a transition effect that starts and ends slowly (equivalent to cubic-bezier(0.42,0,0.58,1)).
    cubic-bezier(n,n,n,n) defines your own values ​​in the cubic-bezier function. Possible values ​​are numbers between 0 and 1.
transition-delay specifies when the transition effect starts. The default is 0. transition-delay: 2s;

CSS3 Animation

@keyframes specifies the animation.    
animation A shorthand property for all animation properties, except the animation-play-state property.    
animation-name specifies the name of the @keyframes animation.    
animation-duration specifies the number of seconds or milliseconds it takes for an animation to complete one cycle. The default is 0.    
animation-timing-function specifies the speed curve of the animation. The default is "ease".    
animation-fill-mode specifies the styles to be applied to an element when an animation is not playing (when the animation is complete, or when the animation has a delay that does not start playing).    
animation-delay specifies when the animation starts. The default is 0.    
animation-iteration-count specifies the number of times the animation is played. The default is 1.
animation-direction specifies whether the animation should play in reverse direction on the next cycle. The default is "normal".
animation-play-state specifies whether the animation is running or paused. The default is "running".

Summarize

The above is what I introduced to you about using CSS3 to achieve transition and animation effects. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!