当两者都应用于同一属性时，CSS关键帧动画中断转换 [英] CSS Keyframe animation breaks transition when both are applied on same property

问题描述

当在进度条元素的过渡的顶部添加CSS动画时，我遇到了一个奇怪的行为：过渡只是停止执行。
不知道为什么我不能同时拥有两个，一个初始动画和改变元素宽度的过渡。

整个东西看起来像这样：

HTML：

 < div class =container 
< div class =bar>< / div> 
< div class =actions> 
< button id =btnResize>调整大小栏< / button> 
< / div> 
< / div> 
  

CSS：

 code> .bar {
 height：3px; 
 width：300px; 
 background-color：blue; 
 position：absolute; 
 transition：margin-left 0.5s缓入，宽度0.5s缓入; 
 / *当我添加下面的行和动画规则转换中断* / 
 animation：progress-bar 1s 0.2s ease both; 
} 
 
 @keyframes progress-bar {
 0％{
 width：0 
} 
} 
  https://jsbin.com/sufofitiri/edit?html,css,output ）
 
 
 
希望有人可以给我一个线索。
解决方案
出于某种原因，看起来像设置 animation 和转换在同一属性导致它不工作。  此   Bugzilla线程类型确认此语句（即 animation 完全控制该属性，并阻止转换产生任何效果） 。
 
 
 
因此，替代方法是使用 width 为一和 max-width 。选择哪一个应该用于动画，哪个应该用于转换是由我们，没有固定的规则。 
 
 
 
由于您的元素已有固定的宽度，设置相同的宽度因为 max-width 不应该引起任何麻烦。在下面的代码段中， width 用于 animation 和 max-width 用于转换。
 
 
 
 
 
 
  （click，function（）;}函数（）函数（）函数（）函数getRandomInt（min，max）{return Math.floor（Math.random（）*（max  -  min + 1））+ min; ）{$（。bar）。css（{max-width：getRandomInt（1，300）+px}）;}）;}）（）;  
 
  .container {width：100％;位置：相对; margin：1em;}。bar {height：3px; background-color：blue; position：absolute; transition：margin-left 0.5s缓入，最大宽度0.5s缓入; 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 =barstyle =width：300px; max-width：300px>< / div> < div class =actions> < button id =btnResize>调整大小< / 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％;位置：相对; margin：1em;}。bar {height：3px; background-color：blue; position：absolute; transition：margin-left 0.5s缓入，宽度0.5s缓入; 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 =barstyle =width：300px; max-width：300px>< / div> < div class =actions> < button id =btnResize>调整大小< / button> < / div>< / div>  
 
 
 
 
I've got a strange behavior when adding a CSS animation on top of the transition for a progress bar element: the transition just stops executing.
Not sure why I cannot have both, an initial animation and the transition when changing the element's width.

The whole thing looks like this:

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
  }
}
I have also created a JSBin to show the weirdness (https://jsbin.com/sufofitiri/edit?html,css,output)

Hopefully someone can give me a clue.
解决方案
For some reason, it seems like setting animation and transition on the same property causes it to not work. This Bugzilla thread kind of confirms this statement (that, animation takes full control over the property and prevents the transition from having any effect).

So, the alternate would be to use width for one and max-width for the other. The choice of which one should be used for animation and which should be used for transition is up to us, there is no fixed rule for it. 

Since your element already has a fixed width, setting the same width as the max-width should not cause any trouble. In the below snippet, width is used for animation and max-width is used for the 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>







In the below snippet, max-width is used for animation and width is used for transition. Both will work as expected.



(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关键帧动画中断转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！