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，设置与 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>

CSS 当关键帧动画在同一个应用上时中断过渡属性

CSS Keyframe animation breaks transition when both are applied on same property

html

css

css-transitions

css-animations

CSS 当关键帧动画在同一个应用上时中断过渡 属性

CSS Keyframe animation breaks transition when both are applied on same property

html

css

css-transitions

css-animations

CSS 当关键帧动画在同一个应用上时中断过渡属性