CSS - плавно увеличивать ширину кнопки и отображать текст при наведении

Question

Я пытался сделать анимацию кнопки в тех состояниях при наведении, где в начальном состоянии кнопка будет отображаться только со значком, а после наведения на нее увеличит ширину и отобразит текст внутри нее.

I невозможно добавить предопределенное значение max-width, width или width, так как я не знаю, какой будет длина текста, отображаемого из серверной службы

Я добавил некоторый код CSS в это, но это не работает должным образом. Поток, что мне нужно, как -

1. Начальное состояние отображения кнопки со значком
2. После наведения ширина кнопки будет расширяться до длины текста
3. Затем показать текст внутри кнопки

.sti_container{
  position: relative;
}

.btn{
  position: relative;
  display: inline-block;
  padding: 15px;
  background-color: blue;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  color: #fff;
  border-radius: 25px;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}
.btn .btn-text{
  width: 0;
  display: inline-block;
  -webkit-transition: color 2s;
  transition: color 2s;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  color: blue;
}
.btn:hover .btn-text{
  width: auto;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="sti_container">
  <button class="btn">
    <span class="btn-icon"><i class="fa fa-shopping-bag" aria-hidden="true"></i></span>
    <span class="btn-text">Shop the image here to click and open</span>
  </button>
</div>

Answer 1

Ширина auto значения не могут быть анимированы, поэтому вместо них используйте max-width:

.sti_container {
  position: relative;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 15px;
  background-color: blue;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  color: #fff;
  border-radius: 25px;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}

.btn .btn-text {
  max-width: 0;
  display: inline-block;
  -webkit-transition: color .25s 1.5s, max-width 2s;
  transition: color .25s 1.5s, max-width 2s;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  color: blue;
}

.btn:hover .btn-text {
  max-width: 300px;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sti_container">
  <button class="btn">
    <span class="btn-icon"><i class="fa fa-shopping-bag" aria-hidden="true"></i></span>
    <span class="btn-text">Shop the image here to click and open</span>
  </button>
</div>

Другая проблема заключается в том, что вы анимируете только цвет, поэтому вам нужно изменить свойство перехода на transition: color 2s, max-width 2s;