button width css transition doesn't work

Question

I'm having a issue with a transition css property in a button tag.

When I hover the button I supposed it will go smoothly to width:auto, but it jump directly.

This is the code, what did I miss?

<button>Hello</button>

button {
   padding: 10px;
   width: 30px;
   overflow:hidden;
   transition: width 400ms ease-in-out;
   -webkit-transition: width 400ms ease-in-out;
   -moz-transition: width 400ms ease-in-out;
}

button:hover {
   width: auto;
}

Answer 1

max-width是你的朋友

Demo

var filterIsOn  = false

Answer 2

转换不适用于width: auto;你必须给出px，ems，百分比等等的值......