How browsers render
When a browser renders a page, there are several steps:
- Building an HTML Tree from HTML (DOM)
- Building a CSS Tree from CSS (CSSOM)
- Combine the above two trees into a Render Tree.
- Layout (size and position according to document flow and box model)
- Do Paint (content, color)
- Perform the Compose composition (presented in cascading order)
CSS animation methods, generally can be summarized as transition and animation.
Before I introduce these two methods, I’ll introduce one very important property, transform.
transform
The transform property allows elements to translate, scale, rotate, tilt, etc. (this does not apply to inline elements).
Common values for the transform property are
translate()
You can shift the elements
transform: translateX(50px) /* Pan it 50px to the right */
transform: translateY(50%) /* Pan down 50% of its height */
transform: translate(20px, 20px) /* Pan it to the right and down 20px */
Copy the code
scale()
Scale the element
transform: sacleX(1.2) /* Width enlarged to 1.2 times of original */
transform: sacle(1.2) /* Width and height are enlarged by 1.2 times */
Copy the code
rotate()
Rotate the element
transform: rotate(60deg) /* Rotate 60 degrees clockwise */
Copy the code
skew()
Skew the elements
transform: skew(45deg) /* Tilt 45 degrees */
Copy the code
Now that you know the basic usage of Transform, you’re ready to animate elements.
I’m going to animate this with Transition
Transition means transition, and if you specify the end of an action, transition automatically adds a transition effect. For example,
div{
height: 50px;
width: 50px;
border: 1px solid red;
transition: transform 1s linear;
}
div:hover{
transform: rotate(45deg);
}
Copy the code
When the mouse hover, the div will rotate 45 degrees clockwise instead of its default. Transition takes 1s to complete, with an automatic animation added.
The values of transition include the attribute name, duration, transition mode, and delay time, which are generally required.
- Attribute name specifies the attributes to be transitioned. All indicates all attributes
- Transition mode refers to the progression-time function model followed to complete the transition, such as constant speed, fast then slow, slow then fast, etc. The CSS provides a variety of function models, such as Linear, ease, ease-in, and ease-out.
Note that not all attributes support transitions, such as display: none–>display: block changes do not support transitions, and similar requirements can be used to use visibility: hidden–>visibility: visible.
Use animation to implement animation
The Transition animation can only specify two states of change, the beginning and the end. The process in between is controlled by mathematical functions, while the animation can specify multiple key frames, which is more flexible.
The core of animation is to define keyframes. The syntax @keyframes is used here, which is written as follows
@keyframes xxx{
0% {style 1}10% {style 2}40% {style 3}...100%{style 4}}Copy the code
or
@keyframes xxx{
from{style 1} to {style 2}}Copy the code
XXX is the animation name.
Once you have declared the keyframe, you can apply the animation to the element using the animation property
div{
animation: xxx 1s infinite alternate-reverse;
}
Copy the code
The value of animation includes the animation name, duration, transition mode, delay, times, direction, etc. For specific usage, see animation