Reset CSS animation when not hovering - html

Question

I would like to reset my animation when hover out from div. This code is from Codepen.io and edited for my purpose.I want border animation to reset when i hover out form div. now it stays fully animated. I'm beginner with coding i am learning by trial and error.
#keyframes bg {
0% { background-size: 0 5px, 5px 0, 0 5px, 5px 0; }
25% { background-size: 100% 5px, 5px 0, 0 5px, 5px 0; }
50% { background-size: 100% 5px, 5px 100%, 0 5px, 5px 0; }
75% { background-size: 100% 5px, 5px 100%, 100% 5px, 5px 0; }
100% { background-size: 100% 5px, 5px 100%, 100% 5px, 5px 100%; }
}
.box {
width: 100%;
margin: 2rem auto;
padding: 2em;
color: white;
background-repeat: no-repeat;
background-image: linear-gradient(to right, #3d3d3d 100%, #3d3d3d 100%),
linear-gradient(to bottom, #3d3d3d 100%, #3d3d3d 100%),
linear-gradient(to right, #3d3d3d 100%, #3d3d3d 100%),
linear-gradient(to bottom, #3d3d3d 100%, #3d3d3d 100%);
background-size: 100% 5px, 5px 100%, 100% 5px, 5px 100%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
animation: bg 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1;
animation-play-state: paused;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}
.box:hover h1{
animation-play-state: running;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
color: #a1a1a1;
}
.box:hover p{
animation-play-state: running;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
color: #a1a1a1;
}
.box h1 {
font-family: Raleway;
color: white;
font-weight: bold;
}
.box p {
font-family: inter;
}
<a href="http://local.local">
<div class="box">
<h1>Zdravotnictví</h1>
<p>Díky newsletteru Zdravotnictví vám neunikne žádná zpráva z oboru Zdravotního průmyslu, kterým tečou stovky miliard. Vychází každé úterý.</p>
</div>
</a>