1.CSS transition
Introduction
Usually when a CSS property value changes, the browser will immediately update the corresponding style.
A transition function has been added to CSS3, through which we can smoothly transition elements from one style to another within a specified time, similar to a simple animation, but without resorting to flash or JavaScript.
In CSS3, 4 related properties are provided to achieve transition effects:
- transition-property – used to specify the CSS property name to apply the transition effect
- transition-duration – specifies how long the transition effect takes to complete
- transition-timing-function – specify the animation curve of the transition effect
- transition-delay – specifies the time to delay the transition effect
Of course, these properties can be set uniformly through transition:
.transition {<!-- -->
transition: property duration timing-function delay;
}
Among them, to successfully implement the transition effect, the transition-property and transition-duration properties must be defined.
The four attributes are described in detail below.
1.transition-property
The transition-property attribute is used to set the name of the attribute involved in the transition in the element. The syntax format is as follows:
transition-property: none | all | property;
The parameters are as follows:
- none – no attributes participate in the transition effect
- all – Indicates that all attributes on the element participate in the transition effect
- property – A list of CSS property names, separated by commas.
2.transition-duration
The transition-duration attribute is used to set the time required for transition (in seconds or milliseconds). The syntax format is as follows:
transition-duration: time;
If there are multiple properties participating in the transition, you can also set the transition time for these properties in sequence in the order declared in transition-property, and use Separate with commas, for example transition-duration: 1s, 2s, 3s;.
Of course, you can also use a time to set the time required for the transition for all properties participating in the transition.
Now that we understand the two properties necessary for a successful transition effect, let’s try implementing one:
In business scenarios, transition is often used together with :hover.
as follows
<!DOCTYPE html>
<html>
<head>
<style>
div {<!-- -->
width: 100px;
height: 100px;
border: 3px solid black;
margin: 10px 0px 0px 10px;
transition-property: width, background;
transition-duration: .25s, 1s;
}
div:hover {<!-- -->
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
The effect is as follows:
3.transition-timing-function
The transition-timing-function attribute is used to set the type of transition animation. The optional values of the attribute are as follows:
The default value is linear.
Examples are as follows:
<!DOCTYPE html>
<html>
<head>
<style>
div {<!-- -->
width: 100px;
height: 100px;
border: 3px solid black;
margin: 10px 0px 0px 10px;
transition-property: width, background;
transition-duration: 5s, 1s;
}
div:hover {<!-- -->
width: 1500px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Now add the transition-timing-function attribute to it:
div {<!-- -->
width: 100px;
height: 100px;
border: 3px solid black;
margin: 10px 0px 0px 10px;
transition-property: width, background;
transition-duration: 5s, 1s;
transition-timing-function: linear;
}
The effect is as follows:
The following is the animation motion curve of each attribute value:
4.transition-delay
The transition-delay attribute is used to set when the transition effect starts. The syntax format of the attribute is as follows:
transition-delay: time;
5. Use transition to set transitions at the same time and set transitions for multiple sets of attributes
The transition attribute is the abbreviation of the above four attributes, through which the above four attributes can be set at the same time.
In addition, multiple groups of transition effects can also be set through the transition attribute. Each group is separated by commas. The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
div {<!-- -->
width: 100px;
height: 100px;
border: 3px solid black;
margin: 10px 0px 0px 10px;
transition: width .25s linear 1.9s, background 1s 2s, transform 2s;
}
div:hover {<!-- -->
width: 200px;
background-color: blue;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Three groups of transition effects are set up, and each group is separated by commas:
width .25s linear 1.9sbackground 1s 2stransform 2s
The effect is as follows:
2.CSS transform – 2D transformation
Introduction
transform is one of the disruptive features in CSS3. It can realize the displacement, rotation, tilt, and scaling of elements, and even supports matrix mode, with transition and animation , which can replace a large number of effects that were previously only possible with Flash.
1. Move – translate
The value of the translate attribute is used to define a two-dimensional translation.
For example: translate(50px, 50px)The effect is as follows
As you can see, the effect of translate is to move the element a certain distance in the horizontal and vertical directions respectively.
Of course, we can also specify the offset in a certain direction separately. The relevant syntax of translate is as follows:
translate(x,y) --- The X-axis and Y-axis move simultaneously translateX(x) --- Move only on the X axis translateY(Y) --- only Y axis movement
2. Scale – scale
The scale attribute value performs two-dimensional scaling of the element.
For example: transform:scale(0.5,1);The effect is as follows
As you can see, in the x-axis direction, the element is scaled to 0.5 times its original value, that is, the scale attribute value can scale the element horizontally and vertically.
The relevant syntax of the scale attribute value is as follows:
scale(X,Y) --- Scale the X-axis and Y-axis simultaneously scaleX(x) --- X-axis scaling scaleY(y) --- Y-axis scaling
The default value of scale() is 1. When the value is set to any value between 0.01 and 0.99, the effect is to make an element smaller; and any value greater than or equal to 1.01 is used to make an element smaller. Elements are enlarged.
3. Rotate – rotate
The rotate attribute is used to rotate the element. A positive value indicates clockwise rotation, and a negative value indicates counterclockwise rotation.
For example: transform:rotate(45deg);The effect is as follows
deg represents degree, the degree of rotation.
In addition, we can use the transform-origin attribute to adjust the base point of element transformation.
div{<!-- -->
transform-origin: left top;
transform: rotate(45deg);
}
The effect is as follows, change the origin of the element to the upper left corner, and then rotate it 45 degrees clockwise
If you want to roughly use the four corners of the element as the base point, you can use the above method, but if you want to accurately determine the position of the base point, you can use px to specify its precise position:
div{<!-- -->
transform-origin: 50px 100px;
transform: rotate(45deg);
}
The effect is as follows:
That is, 50px on the x-axis and 100px on the y-axis are used as the base points of rotation.
You can see the picture below:
4. Skew – skew
The skew attribute value is used to tilt the element along the x-axis and y-axis.
For example:
div{<!-- -->
transform: skew(20deg, 10deg);
}
The effect is as follows:
When the second parameter is not specified, it defaults to 0. In addition, the values of these two parameters can be negative!
5.matrix
…
3.CSS transform – 3D transformation
CSS transform also supports 3D transformations. To implement 3D transformation, you first need to understand the three-dimensional coordinate system in CSS.
There are certain differences between the three-dimensional coordinate system in CSS and the left-handed 3D coordinate system. The three-dimensional coordinate system in CSS is equivalent to rotating the left-handed 3D coordinate system by 180 degrees around its x-axis:
As you can see, the negative direction of the y-axis is at the top, and the negative direction of the z-axis is at the back, so it can be written like this:
- The x-axis has negative values to the left and positive values to the right.
- The y-axis has negative values going up and positive values going down.
- The z-axis has negative values inward and positive values outwards.
Take rotateX as an example:
.div1 {<!-- -->
width: 100px;
height: 100px;
/* border: 3px solid black; */
background-color: yellow;
color: red;
margin: 10px 0px 0px 10px;
position: absolute;
left: 50%;
top: 50%;
transition: all 0.5s ease 0s;
}
.div1:hover {<!-- -->
transform: rotateX(180deg);
}
That is, rotate around the X-axis of the coordinate system
For other attributes, please refer to:
CSS 3D
4.CSS animation – animation
Reference: https://zhuanlan.zhihu.com/p/456713454
This article has a very comprehensive introduction to CSS animation, and there are many interesting examples in it.