对于一个 hover transition 动画,它应该是从:
正常状态 -> hover状态 -> 正常状态 (三个步骤,两种状态)
所以,必须要有一种方法,能够使得 hover 动画的进入与离开产生两种不一样的效果,实现:
状态1 -> hover状态 -> 状态2 (三个步骤,三种状态)
html:
<div>Hover Me</div>
css:
body {
padding: 50px;
}
div {
position: absolute;
width: 200px;
height: 60px;
line-height: 60px;
font-size: 32px;
cursor: pointer;
color: #333;
text-align: center;
margin: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: color .5s;
}
div::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 4px;
background: blue;
z-index: -1;
transition: width .5s;
}
div:hover::before {
width: 200px;
}
效果图: