如何在mouseout上停止SVG描边动画

Question

我使用以下代码创建了一个SVG描边动画：

 @keyframes draw {
    30%{stroke-dashoffset:0; fill-opacity: 0;}
    50%{fill-opacity:1;}    
    100%{stroke-dashoffset:0; fill-opacity:1;}  
}

.box-icon:hover {
    opacity: 1;
    svg {
        .path {
            fill-opacity: 1;
            stroke-dashoffset:160;
            stroke-dasharray:160;
            animation: draw 3s linear forwards;
        }
    }
}

问题是，当我徘徊时，动画会再次重启。所以它会持续触发，而我需要它才能在mouseover而不是mouseout上启动它。

如何解决这个问题？