The animation principles
Animation is actually by a lot of still pictures continuous display, the use of human eye’s visual residual image illusion and mistaken for an active picture. Each of these still images is called a frame. In general, the more images per second, the smoother the animation.
Principles of Browser Rendering
The rendering steps may vary from browser to browser, but the general process is the same.
- Building an HTML tree (DOM) from HTML
- Building a CSS Tree from CSS (CSSOM)
- Merge two trees into a single render tree
- Document flow, box model, calculated size, and location
- Paint the border color, text color, shadow, etc.
- Compose (display the screen according to the cascading relationship)
How does the browser render when page elements change?
The browser does not re-render all the elements of the page with modified properties as described above. To improve browser performance, there are three ways to re-render.
How do you know which properties will be rendered in which way?? It’s irregular. You can check it out on this website.
csstriggers.com/
CSS animations
Animation optimization
- Js optimization: use requestAnimationFrame instead of setTimeout or setInterval
- CSS optimization: Use Will-change or translateZ to elevate moving elements
These optimizations also do not have a certain rule, the specific content can see the following link
Developers.google.com/web/fundame…
transform
Commonly used functions
Inline elements do not support transform, and must first be converted to block translate(-50%,-50%) to absolutely center elements. Example: TansForm: scale(0.5) translate(-100%,-100%); transform: none; Cancel all animations
- The displacement of the translate
- The zoom scale
- Rotate the rotate
- Tilt skew
translate
You can move in three dimensions, and the value can be negative, which means you’re moving in the negative direction. When moving in the z-axis, specify perspective translateX translateY translateZ tansLate3D (x,y,z).
scale
Specify the scale. When using scale, the argument can be one, which means scaling in both x and y is less used because of ambiguity
- scaleX
- scaleY
- scale(x,[y])
rotate
With rotate, a transformation that rotates around a fixed point (specified by the transform-Origin attribute) without morphing. Rotate (360deg) is used to rotate (360deg) to create a loading style
- rotate
- rotateZ
- rotateX
- rotateY
- rotate3d
skew
Deg skewX skewY skew
transition
You can use this property to add a transition effect to the animation and not all properties can be transitioned
- display: none; Cannot transition
- Background colors can be transitioned
- Opacity can be transitioned
Perhaps because the background color and transparency values are both numerical and quantifiable, they can be transitioned.
Abbreviation of grammar
Transition: Indicates the name of the transition attribute
The initial value
If the time parameter is a decimal point, the zero in front of the decimal point can be omitted
You can query specific parametersmdn
animation
The animation property can be used when the animation has multiple steps and it is cumbersome to use multiple transforms.
- The state of the animation is described using @keyFrames name {}
- The animation property is then used for animation transition assignment
@keyframes Complete syntax
- One way to write it is from to
- One way to write it is as a percentage
Animation abbreviated syntax
Animation: Duration | Transition mode | Delay | Number | Direction | Fill mode | Pause | Animation name;
The initial value
The Times can be defined as decimal cycles to play part of the animation cycle.
Transition is the same as transition.
You can query specific parametersmdn