transition not working while resizing image

I was making a navigation which will be fixed and be smaller after scrolling a little bit. I set transition for smooth resizing content. I got a problem that the logo image wasn’t resizing smoothly i mean with transition.

The image don’t support (as far as I know) transition on resizing if the size isn’t defined. You have to write the normal size of the image and also the size of the image after the event (hover, click etc.)

wrong code,

#logo img:hover {width: 150px;}

Correct code,

 

#logo img {width: 100px;}

#logo img:hover {width: 150px;}