Is there function that setting a deadline in CSS transiton? without JS - html

Question

In my code, the left border should be removed after .6s even when the cursor is still(hover) on the button
.button {
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
padding: 10px 20px;
text-decoration: none;
color: inherit;
font-size: 20px;
}
.button::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 0%;
border-left: 1.5px solid black;
transition: 0.6s;
}
.button:hover:after {
transition: .6s;
height: 100%;
/*After hover(after.6s), height should be 0%*/
}

Answer 1

You can use callback function to fetch the end of a transition/animation.
Check out this article:
https://betterprogramming.pub/detecting-the-end-of-css-transition-events-in-javascript-8653ae230dc7

Answer 2

As suggested by #prettyInPink, Here is how you can use keyframes.
.button {
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
padding: 10px 20px;
text-decoration: none;
color: inherit;
font-size: 20px;
}
.button::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 0%;
border-left: 1.5px solid black;
transition: 0.6s;
}
.button:hover:after {
/**
Added 1.2s to smoothly hide the border
From 0%-50% - .6s
From 50%-100% - .6s
**/
animation: borderAnim 1.2s ease-in-out forwards;
}
#keyframes borderAnim {
0% {
opacity: 1;
height: 0%;
}
50% {
opacity: 1;
height: 100%;
}
100% {
height: 100%;
opacity: 0;
}
}
<button class="button">My Button</button>