CSS3's transform-origin cooperates with scale to control animation and achieve various hover effects

1. Draw a line at the bottom, starting on the left and ending on the right

html：

<div class="silde-txt">underline</div>

css：

<style>
.silde-txt{
width: 200px;
color: red;
position: relative;
text-align: center;
margin-top:20px;
}
.silde-txt:before{
content: "";
position:absolute;
width: 200px;
height: 4px;
bottom: -4px;
left: 0px;
background: deeppink;
transition: transform .5s;
transform: scale(0);
transform-origin: 100% 0;
}
.silde-txt:hover::before{
transform: scale(1);
transform-origin: 0 0;
}

</style>

2: The left side of the background color 1 is generated and disappears from the right side

     The background color 2 is generated at the top and disappears from the bottom

<div class="bg">Background animation 1</div>

<div class="bg2">Background animation 1</div>

.bg,.bg2{
position: relative;
width: 200px;
height: 60px;
line-height: 60px;
font-size: 32px;
cursor: pointer;
color: #333;
text-align: center;
transition: color .5s;
margin: 10px;

}
.bg:after{
content: "";
position: absolute;
left: 0;
width: 200px;
height: 60px;
background: deeppink;
z-index: -1;
transform: scale3d(0, 1, 1);
transform-origin: 100% 50%;
transition: transform .5s;
}
.bg:hover::after{
transform: scale3d(1, 1, 1);
transform-origin: 0% 50%;
transition-timing-function: ease-in;
}

.bg2::before {
content: "";
position: absolute;
left: 0;
width: 200px;
height: 60px;
background: deeppink;
z-index: -1;
transform: scale3d(0, 0, 1);
transform-origin: 50% 100%;
transition: transform .5s;
}

.bg2:hover::before{
transform: scale3d(1, 1, 1);
transform-origin: 50% 0%;
}