Safari上的flexbox动画关键帧

Question

为什么flex关键帧在Safari中不起作用？在其他浏览器中，一切正常。

<div class="a">
  <div class="b"></div>
</div>

.a {
  height: 200px;
  display: flex;
}

.b {
  flex:0 1 50%;  
  border: 20px solid red;
  animation: anim-b 1s infinite;
}

@keyframes anim-b {
    0% { flex:0 1 0%; }
    100% { flex:0 1 100%; }
}

Answer 1

当混合速记和速记属性时，动画可能是挑剔的（错误）。

在这种情况下，Safari在动画flex-basis时也有一个错误，我刚注意到它仍然没有修复。 11。

• https://github.com/DrummerHead/safari-flex-basis-animation-bug

在这种情况下，对于默认的row方向，您需要使用width。

堆栈代码段

.a {
  height: 200px;
  display: flex;
}

.b {
  flex:0 1 auto;
  width: 50%;
  border: 20px solid red;
  animation: anim-b 1s infinite;
}

@keyframes anim-b {
    0% { width: 0%; }
    100% { width: 100%; }
}

<div class="a">
  <div class="b"></div>
</div>