按钮宽度css转换不'；行不通

我对按钮标记中的转换css属性有问题

当我悬停按钮时，我想它会平滑地转到宽度：auto，但它会直接跳转

这是密码，我错过了什么

<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;
}

你好 钮扣{ 填充：10px； 宽度：30px； 溢出：隐藏； 过渡：宽度400ms，易于进出； -webkit过渡：宽400ms，易于输入输出； -moz过渡：宽400ms，缓进缓出； } 按钮：悬停{ 宽度：自动； }

---

转换将不适用于

宽度：自动您必须以px、ems、百分比或任何形式给出一个值…
最大宽度是您的朋友


这实际上与使用像素、ems或百分比设置宽度值相同。这看起来很漂亮，但悬停和浏览器响应之间仍有一点延迟，你不觉得吗？非常感谢。这是有原因的-最大宽度延伸到其父对象的边缘，所以在mouseout时，它不会立即重新出现。实际上，它可能不会这样做，这取决于布局的方式，您可以将“最大宽度”设置为已知的“最大值”。
button {
   padding: 10px;
   width: auto;
   max-width: 30px;
   overflow:hidden;
   transition: max-width 400ms ease-in-out;
   -webkit-transition: max-width 400ms ease-in-out;
   -moz-transition: max-width 400ms ease-in-out;
}

button:hover {
   max-width: 100%;
}