将元素悬停在元素上时，我试图更改它的宽度。它似乎可以工作，但是只要我将鼠标停留在元素上，它就会一直过渡，从而导致类似毛刺的循环。我怎样才能使过渡只发生一次？
谢谢。
html：
<div>
<div>
<img id="img" src="#"/>
</div>
</div>
css：
#img {
width: 326px;
height: 326px;
-webkit-transition: width 0.4s,height 0.4s;
transition: width 0.4s,height 0.4s;
}
#img:hover {
width: 0px;
height: 326px;
}