Article directory
Tip: The system defaults to transition from left to right and from top to bottom.
1. Transition from right to left
Idea: The main thing is to fix the div on the right, so that the transition can only be extended to the left
.ltr {
width: 20px;
height: 60px;
background-color: pink;
transition: width 2s;
position: absolute;
right: 0;
}
.ltr:hover {
width: 200px;
}
renderings
2. Transition from bottom to top
Idea: The main thing is to fix the div at the bottom, so that the transition can only be extended upwards
.down-up {
height: 20px;
width: 160px;
background-color: rgb(85, 180, 187);
transition: height 2s;
position: absolute;
bottom: 0;
}
.down-up:hover {
height: 200px;
}
renderings
This article also wrote an advanced version , which mainly realizes the transition from bottom to top or from left to right when multiple contents are arranged. If you are interested, you can take a look.