Ich habe ein seltsames Verhalten beim Hinzufügen einer CSS-Animation über dem Übergang für ein Fortschrittsleistenelement: Der Übergang wird gerade nicht mehr ausgeführt. Ich bin mir nicht sicher, warum ich nicht beides haben kann, eine anfängliche Animation und den Übergang, wenn ich die Breite des Elements ändere.

Das Ganze sieht so aus:

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

Ich habe auch ein JSBin erstellt, um die Verrücktheit zu zeigen https: //jsbin.com/sufofitiri/edit? html, css, output)

Hoffentlich kann mir jemand einen Hinweis geben.