Safari 上的 flexbox 动画关键帧答案

【问题标题】：flexbox animation keyframes on SafariSafari 上的 flexbox 动画关键帧
【发布时间】：2018-06-09 02:38:04
【问题描述】：

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

【问题讨论】：

可能是一个错误，你也可以在这里看到stackoverflow.com/questions/22695915/…
@TemaniAfif 那个帖子有点老了，主要是关于 FF 和 transition，而不是 animation。
@LGSon 是的，我知道它很旧，但我认为这似乎更像是一个错误（如这篇旧帖子）而不是一个问题，所以我将此链接作为一个简单的示例，以便他可以通过这种方式进行搜索，因为我猜过渡或动画的行为相同。
@TemaniAfif 这是一个错误...更新了我的答案
@TemaniAfif Btw、transition 和 animation 可能表现相似，但它们是两个不同的属性，其中一个可能对它影响的某个属性有错误的行为，另一个工作得很好。如果您尝试将flex-basis 与transition 一起使用，您会发现它有效。

标签： css animation safari flexbox

【解决方案1】：

当一个混合速记和速记属性时，动画可能会很挑剔（错误）。

在这种情况下，Safari 在动画flex-basis 时也有一个错误，我刚刚注意到在版本中仍未修复。 11.

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

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

堆栈sn-p

.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>

【讨论】：