У меня странное поведение при добавлении CSS-анимации поверх перехода для элемента индикатора выполнения: переход просто прекращается. Не уверен, почему у меня не может быть и начальной анимации, и перехода при изменении ширины элемента.

Все выглядит так:

HTML:

  <div class="container">
    <div class="bar"></div>
    <div class="actions">
      <button id="btnResize">Resize bar</button>
    </div>
  </div>

CSS:

.bar {
  height: 3px;
  width: 300px;
  background-color: blue;
  position: absolute;
  transition: margin-left 0.5s ease-in-out, width 0.5s ease-in-out;
  /*Transition breaks when I add the line below with animation rule*/
  animation: progress-bar 1s 0.2s ease both;
}

@keyframes progress-bar {
  0% {
    width: 0
  }
}

Я также создал JSBin, чтобы показать странность (https://jsbin.com/sufofitiri/edit?html,css,output)

Надеюсь, кто-нибудь может дать мне подсказку.