Eu tenho um comportamento estranho ao adicionar uma animação CSS em cima da transição para um elemento da barra de progresso: a transição simplesmente para de ser executada. Não sei por que não posso ter os dois, uma animação inicial e a transição ao alterar a largura do elemento.

A coisa toda fica assim:

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

Eu também criei um JSBin para mostrar a estranheza (https://jsbin.com/sufofitiri/edit?html,css,output)

Espero que alguém possa me dar uma pista.