当两者应用于同一属性时，CSS关键帧动画会打断转换

Question

当在进度条元素的转换顶部添加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，输出）

希望有人能给我一个线索。

Answer 1

由于某种原因，在同一属性上设置animation和transition似乎会导致它无法工作这个Bugzilla线程在某种程度上证实了这个语句（即animation完全控制属性并防止transition产生任何影响）。

因此，备选方案是使用width作为一个，使用max-width作为另一个。哪个应该用于动画，哪个应该用于过渡，这取决于我们，没有固定的规则。

由于您的元素已经有一个固定的width，因此设置与max-width相同的width应该不会引起任何问题。在下面的代码段中，width用于animation，max-width用于transition。

(function() {
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  $("#btnResize").on("click", function() {
    $(".bar").css({
      "max-width": getRandomInt(1, 300) + "px"
    });
  });
})();

.container {
  width: 100%;
  position: relative;
  margin: 1em;
}
.bar {
  height: 3px;
  background-color: blue;
  position: absolute;
  transition: margin-left 0.5s ease-in-out, max-width 0.5s ease-in-out;
  animation: progress-bar 1s 0.2s ease both;
}
.actions {
  padding-top: 30px;
}
@keyframes progress-bar {
  0% {
    width: 0
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="bar" style="width: 300px; max-width: 300px"></div>
  <div class="actions">
    <button id="btnResize">Resize</button>
  </div>
</div>

---

在下面的代码段中，max-width用于animation，width用于transition。两者都将按预期工作。

(function() {
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  $("#btnResize").on("click", function() {
    $(".bar").css({
      "width": getRandomInt(1, 300) + "px"
    });
  });
})();

.container {
  width: 100%;
  position: relative;
  margin: 1em;
}
.bar {
  height: 3px;
  background-color: blue;
  position: absolute;
  transition: margin-left 0.5s ease-in-out, width 0.5s ease-in-out;
  animation: progress-bar 1s 0.2s ease both;
}
.actions {
  padding-top: 30px;
}
@keyframes progress-bar {
  0% {
    max-width: 0
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="bar" style="width: 300px; max-width: 300px"></div>
  <div class="actions">
    <button id="btnResize">Resize</button>
  </div>
</div>