Css Safari上的flexbox动画关键帧

为什么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%; }
}

.a{
高度：200px；
显示器：flex；
}
.b{
弹性：01 50%；
边框：20px纯红；
动画：anim-b1s无限；
}
@关键帧anim-b{
0%{flex:0110%；}
100%{flex:01100%；}
}

当一个人混合使用速记和速记属性时，动画可能会很挑剔

在本例中，Safari在设置

FlexBasis

动画时也有一个bug，我刚才注意到它在版本中还没有修复。十一,

在这种情况下，对于默认的

行

方向，您需要使用

宽度

堆栈片段

.a{
高度：200px；
显示器：flex；
}
.b{
flex:01自动；
宽度：50%；
边框：20px纯红；
动画：anim-b1s无限；
}
@关键帧anim-b{
0%{宽度：0%；}
100%{宽度：100%；}
}

当一个人混合使用速记和速记属性时，动画可能会很挑剔

在本例中，Safari在设置

FlexBasis

动画时也有一个bug，我刚才注意到它在版本中还没有修复。十一,

在这种情况下，对于默认的

行

方向，您需要使用

宽度

堆栈片段

.a{
高度：200px；
显示器：flex；
}
.b{
flex:01自动；
宽度：50%；
边框：20px纯红；
动画：anim-b1s无限；
}
@关键帧anim-b{
0%{宽度：0%；}
100%{宽度：100%；}
}

可能是一个bug，你也可以在这里看到@Temaniaf如果那篇文章有点老，主要是关于FF和

转换
，而不是
动画
@LGSon是的，我知道它很老，但我认为这似乎更像一个bug（就像这篇老文章）而不是一个问题，所以我把这个链接作为一个简单的例子，让他可以用这种方式搜索，因为转换或动画的行为是一样的，我猜。@Temaniaf如果是bug…更新了我的answer@TemaniAfif顺便说一句，
transition
和
animation
的行为可能类似，尽管它们是两个不同的属性，其中一个属性可能会对其影响的特定属性产生错误行为，而另一个则工作得非常好。如果你尝试将
flex basis
与
transition
结合使用，你会发现它是有效的。可能是一个bug，正如你在这里看到的@Temaniaf，如果那篇文章有点旧，主要谈论FF和
transition
，而不是
动画
@LGSon是的，我知道它很旧，但我认为这似乎更像一个bug（就像这篇老文章）所以我把这个链接作为一个简单的例子，这样他就可以用这种方式搜索，因为转换或动画的行为我猜是一样的。@Temaniaf如果是个bug…更新了我的answer@TemaniAfif顺便说一句，
transition
和
animation
的行为可能类似，尽管它们是两个不同的属性，其中一个可以有一个特定属性的错误行为，它的影响，和其他完美的工作。如果您尝试将
flex basis
与
transition
一起使用，您会发现它是有效的。