Safari上的flexbox动画关键帧
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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%; }
}
答案
当混合速记和速记属性时，动画可能是挑剔的（错误）。
在这种情况下，Safari在动画flex-basis时也有一个错误，我刚注意到它仍然没有修复。 11。
在这种情况下，对于默认的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>以上是关于Safari上的flexbox动画关键帧的主要内容，如果未能解决你的问题，请参考以下文章