HTML CSS transition effect
1,transition
Transition: through the transition, you can specify the switching mode of the attribute of an element when it changes, so as to create some very good effects and improve the user experience. For example:
transition: height 2s; /*When the height of the element changes, it takes two seconds to transition.*/
In this way, all transition related attributes can be set at the same time. There is only one requirement. If you want to write delay, the first of the two times is the duration and the second represents the delay time.
transition: 2s margin-left 1s; /*Indicates that when the value of the margin left attribute of the element changes, the transition starts after a delay of 1 second, and the duration is 2 seconds*/
2. Another setting method:
Transition property: Specifies the property to perform the transition, such as: transition property: width, height.
You can specify the width and height at the same time. Multiple attributes are separated by commas. If all attributes need transition, you can use the all keyword. Most attributes support transition effect (basically calculable read can be set). Note that the transition must be from one valid value to another valid value, For example, auto is not a valid value, that is, its value is uncertain;
Transition duration: Specifies the duration of the transition effect, for example: transition duration: 2S; Specify a duration of 2 seconds.
Time unit: s and MS, 1s = 1000ms. You can also set different transition times between multiple attributes of transition property. Specify multiple values through the transition duration attribute, separated by commas. Here, the order of multiple values corresponds to the attributes specified by transition property one by one;
Transition timing function: Specifies the timing function of the transition, that is, the execution mode of the transition. The optional values are as follows:
- ease, the default value, starts slowly, accelerates first and then decelerates;
- linear, uniform motion;
- Ease in, accelerate movement;
- Ease out, slow down;
- Ease in out: accelerate first and then decelerate;
- Function: transition-0, such as transition-cubic; The value can be in https://cubic-bezier.com/ Get it from the website;
- steps() to execute the transition effect step by step; Such as transition timing function: steps (2); The transition effect is executed in two steps. Two values can be specified in the steps function. The first specifies the number of transition steps, and the second specifies whether to execute before or after a certain time. Optional values: start and end (default). For example, steps(2, start) can be understood as taking the first step before the first second and the second step before the second second second;
Transition delay: the delay of the transition effect, that is, how long to wait before the transition effect is executed. For example: transition delay: 2S; Indicates that the transition effect starts after waiting for 2 seconds;
The exercise code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100%;
height: 500px;
background-color: silver;
}
.box1 div{
width: 100px;
height: 100px;
}
.box2{
background-color: #bfa;
margin-bottom: 100px;
/* transition: all 2s; */
/* transition-property: width, height; */
margin-left: 0;
/* transition-duration: 2s; */
/* transition-timing-function: steps(2, end); */
/* transition-delay: 2s; */
transition: 2s margin-left 1s;
}
.box3{
margin-left: 0;
background-color: orange;
transition-property: all;
transition-duration: 2s;
}
.box1:hover .box2,
.box1:hover .box3{
margin-left: 1266px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>