css - Animation-play-state Reset or Resume -

i working on hover button animation. here's code:

codepen

html

<a href="" class="more-link"><span>hover me &rarr;</span></a>  

css

.more-link {     display: inline-block;     min-height: 2.4em;     line-height: 2.4;     color: #000;     text-decoration: none;     text-transform: uppercase;     font-weight: bold;     position: relative;     min-width: 8em;     text-align: center; }  .more-link span {     display: block;     width: 100%;     height: 100%;     position: relative;     box-sizing: border-box;     padding: 0 1em; }  @keyframes tl {     {         width: 0%;     }     {         width: 100%;     } }  @keyframes tr {     {         height: 0%;     }     {         height: 100%;     } }  .more-link:before {     content: ' ';     display: block;     position: absolute;     top: 0;     left: 0;     width: 0%;     height: 1px;     background: #000;     animation: tl 400ms ease-in both;     animation-play-state: paused; }  .more-link:hover:before {     animation-play-state: running; }  .more-link:after {     content: ' ';     display: block;     position: absolute;     top: 0;     right: 0;     width: 1px;     height: 0%;     background: #000;     animation: tr 400ms ease-in 400ms both;     animation-play-state: paused; }  .more-link:hover:after {     animation-play-state: running; }  .more-link span:before {     content: ' ';     display: block;     position: absolute;     bottom: 0;     right: 0;     width: 0%;     height: 1px;     background: #000;     animation: tl 400ms ease-in 800ms both;     animation-play-state: paused; }  .more-link:hover span:before {     animation-play-state: running; }  .more-link span:after {     content: ' ';     display: block;     position: absolute;     bottom: 0;     left: 0;     width: 1px;     height: 0%;     background: #000;     animation: tr 400ms ease-in 1200ms both;     animation-play-state: paused; }  .more-link:hover span:after {     animation-play-state: running; } 

as can see, have set animation-play-state: paused anytime hover out button need "resume" or "reset" of animation when hover out, looking documentation here https://developer.mozilla.org/en-us/docs/web/css/animation-play-state there not implementation. what's workaround case?

why not used event listeners javascript?

something like:

(element).addeventlistener("mouseover", function(){ (add animation name , info here executes when hovered over.) }); 

then this:

(element).addeventlistener("mouseout", function(){ (add animation name , info here executes when mouse leaves div.) });