Can't Make Css Width Transition Work

I couldn't manage to find out how to make the CSS width transition work. Well, it actually work, but it just jump from auto to 100% with no animation. Here's my CSS: div#searchbar

Solution 1:

You should add width rule for non hover selector.

https://jsfiddle.net/qz3qj846/