html - 当两者应用于同一属性时，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,output)

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

Answer 1

出于某种原因，似乎设置animation和 transition在同一属性上导致它无法工作。 This Bugzilla 线程在某种程度上证实了这一说法(即 animation 完全控制了该属性并阻止了 transition 产生任何影响)。

因此，替代方案是使用 width对于一个和max-width对于另一个。哪个应该用于动画，哪个应该用于过渡取决于我们，没有固定的规则。

因为你的元素已经有一个固定的 width , 设置相同 width作为 max-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>