如何暂停动画？

Question

我正在尝试对此图像进行缩放动画。动画有效，但完成后，即使鼠标仍在图像上，它也会恢复到最初的状态。 您能否修改代码，以便当光标仍在图像上时动画暂停，而当我抬起光标时，图像会恢复到反向动画开始时的状态？它真的会帮助我！谢谢。

HTML：

<img src="https://www.gelestatic.it/thimg/K60JlJ8OO9tEcHvsOUp58mFbH68=/fit-in/1280x1280/https%3A//www.lastampa.it/image/contentid/policy%3A1.39954396%3A1614294221/cat02.jpg%3Ff%3Dlibero%26%24p%24f%3D8723fae" id="image">

CSS：

#image {
    border: solid 10px black;
    border-radius: 15px;
    margin-right: 20px;
    width: 300px;
    height: 300px;
    background: black;

}

#image:hover {
    animation-name: example;
    animation-duration: 1s;

}

@keyframes example {
    0%   {width: 300px; height: 300px;}
    100%  {width: 330px; height: 330px;}

}