Javascript 如何在鼠标关闭时反转@keyframe动画？

当鼠标离开按钮时，我需要反转擦拭动画。有没有一种方法可以仅在CSS中实现这一点

我知道我可以反转动画，但我不确定在CSS文件中放在哪里才能得到正确的动画。如果我把它放在

.get start

，它会擦除边框，我无法完全与按钮交互

HTML:

你可以试试

.get-started:not(:hover):after {}

用一个倒转的动画。但它在初始页面加载时可能会有不必要的行为，我想它总是从这个动画开始。有时候你无法避免javascript。在mouseout上添加一个类并在mouseenter上再次删除它可能会起作用，因此您可以为该类指定反向动画

var els = document.querySelectorAll('.get-started');
for (var i = 0; i < els.length; i++) {
    els[i].addEventListener('mouseleave', function(e) {
        e.target.classList.add('mouseleaveAnimationClass');
    });
    els[i].addEventListener('mouseenter', function(e) {
        e.target.classList.remove('mouseleaveAnimationClass');
    });
}

var els=document.querySelectorAll（'.get start'）；
对于（变量i=0；i

如何将动画添加到JS类？一般来说，我对web开发有点陌生，所以我有点迷路了。提前谢谢！

.get-started:not(:hover):after {}

var els = document.querySelectorAll('.get-started');
for (var i = 0; i < els.length; i++) {
    els[i].addEventListener('mouseleave', function(e) {
        e.target.classList.add('mouseleaveAnimationClass');
    });
    els[i].addEventListener('mouseenter', function(e) {
        e.target.classList.remove('mouseleaveAnimationClass');
    });
}