将关键帧动画悬停在外

Question

.btn-text {
background: transparent;
box-sizing: border-box;
text-decoration: none;
box-shadow: inset 0 0 0 1px transparent;
border-bottom: 1px solid transparent;
color: red;
padding: 8px 12px 0;
font-size: inherit;
font-weight: 500;
position: relative;
width:100px;
display:block;
vertical-align: middle;
animation: before 0.4s ease;
transition: all 0.4s ease;
margin-top: 30px;
}
.btn-text::before, .btn-text::after {
box-sizing: inherit;
content: "";
position: absolute;
width: 100%;
height: 100%;
}
.btn-text:active {
transform: translateY(0);
box-shadow: 0 1rem 0.5rem rgba(0, 0, 0, 0.2);
}
.btn-text:hover {
text-decoration: none;
color: red;
border-bottom: 1px solid transparent;
}
.btn-text::before, .btn-text::after {
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: center;
}
.btn-text::before {
border-top: 1px solid red;
border-bottom: 1px solid red;
transform: scale3d(0, 1, 1);
}
.btn-text::after {
border-left: 1px solid red;
border-right: 1px solid red;
transform: scale3d(1, 0, 1);
}
.btn-text:hover::before, .btn-text:hover::after {
animation: border 0.5s ease forwards;
}
.btn-text span {
display: block;
border-bottom: 1px solid red;
margin-top: 8px;
}
@keyframes border {
to{
transform: scale3d(1,1,1);
}
}

<a href="#!" class="btn-text " style="width: fit-content">know
more
<span></span>
</a>

我正在尝试在动画效果中添加一个很酷的悬停。当我将鼠标悬停在按钮上时，我正在调用一个放大边框的动画。

我的问题是，当我悬停在按钮外时，它会在没有动画的情况下返回到初始状态。

我希望当我悬停时，相同的动画应该反转。

Answer 1

你不需要动画，你需要一个过渡......这样：

代码笔演示

* {
box-sizing: border-box;
}
.btn-text {
background: transparent;
text-decoration: none;
box-shadow: inset 0 0 0 1px transparent;
border-bottom: 1px solid transparent;
color: red;
padding: 8px 12px 0;
font-size: inherit;
font-weight: 500;
position: relative;
width: 100px;
display: block;
vertical-align: middle;
margin-top: 30px;
margin-left: 30px;
}
.btn-text::before,
.btn-text::after {
box-sizing: inherit;
content: "";
position: absolute;
width: 100%;
height: 100%;
transition: transform .5s;
}
.btn-text:hover {
text-decoration: none;
color: red;
border-bottom: 1px solid transparent;
}
.btn-text::before,
.btn-text::after {
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: center;
}
.btn-text::before {
border-top: 1px solid red;
border-bottom: 1px solid red;
transform: scale3d(0, 1, 1);
}
.btn-text::after {
border-left: 1px solid red;
border-right: 1px solid red;
transform: scale3d(1, 0, 1);
}
.btn-text:hover::before {
transform: scale3d(1, 1, 1);
}
.btn-text:hover::after {
transform: scale3d(1, 1, 1);
}
.btn-text span {
display: block;
border-bottom: 1px solid red;
margin-top: 8px;
}

<a href="#!" class="btn-text " style="width: fit-content">know more
<span></span>
</a>