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。

Stack snippet

＆＃13;

＆＃13;

.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%; }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;