CSS3 Transform-origin with scale, control animation, achieve a variety of hover effects

1. Bottom draw line, start from left, end on right

Html:

<div class= "Silde-txt" > Bottom dash </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: Left side of background color 1, disappears from right

The top of the background color 2 is generated and disappears from below

<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%;
}

CSS3 Transform-origin with scale, control animation, achieve a variety of hover effects