How to put ending animation while removing cursor from the box using css?

Question

I don't know to explain properly. So I have made video.

https://drive.google.com/file/d/17PcUKZzI9e162rCcVYP9R8RMJVDMXAso/view?usp=drivesdk

<!DOCTYPE html>
<head>
<style>
#imgnidhi1{
    background-image: url(images/prabhupada5.jpg);
    background-size: cover;
    background-position: center;
}

#nidhibox1:hover{
    animation: nidhibox1 3s ease-in-out 1 forwards;
}

@keyframes nidhibox1{
    10%,100%{
        border: 0.1px solid rgba(0, 0, 0, 0.7);
        padding-top: 5vh;
        padding-bottom: 9vh;
    }
    50%{
        border: 0.001 solid rgba(0, 0, 0, 0.1);
        padding-top: 5vh;
        padding-bottom: 9h;
</style>
</head>
<body>
<div class="nidhibox" id="nidhibox1">
            <div class="nidhiimg" id="imgnidhi1"></div>
            <h2 style="position:relative;top:9vh;"onclick="location.href='bhakticourses.html'" >Bhakti Courses</h2>
</div>
</div>
</body>
</html>

In the output of the code. The black border appears with animation but when you take the cursor out, it goes without any kind of animation which gives bad impression to the user.

Hare Krishna! Video is fine but you need to post your code so that people can debug and give you a solution. — m4n0, May 21 '22 at 06:51
Will [this answer](https://stackoverflow.com/questions/58802229/how-to-pause-interval-on-mouseover-and-resume-when-the-mouse-is-no-longer-over/58803442#58803442) help you? — Rickard Elimää, May 21 '22 at 06:53

How to put ending animation while removing cursor from the box using css?

0 Answers0