revers keyframe animation on hover out - html

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>
I am trying to add a cool hover in animation effect. When I hover over the button I am calling an animation which scaling up borders .
My problem is that when I hover out of button it goes back to the initial state without animation.
I want that the same animation should reverse when I hover out.

Answer 1

You don't need an animation for this, you need a transition...like so:
Codepen Demo
* {
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>