Warum Flex Keyframes in Safari nicht funktioniert? In anderen Browsern funktioniert alles einwandfrei.flexbox animation keyframes auf 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%; }
}
Animationen können wählerisch (Buggy) sein, wenn eine Mischung aus Longhand- und Kurzschrifteigenschaften besteht.
In diesem Fall hat Safari auch einen Fehler bei der Animation flex-basis, die ich gerade festgestellt habe, ist immer noch nicht in ver fixiert. 11.
In diesem Fall für die Standard row Richtung, müssen Sie width stattdessen verwenden.
Stapel Snippet
.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>
vielleicht einen Fehler, wie man hier sehen https://stackoverflow.com/questions/22695915/css-transitions-on-flex-basis- not-working-in-ff –
@TemaniAfif Dieser Beitrag ist ein wenig alt, spricht hauptsächlich von FF und von "Transition", nicht von "Animation". – LGSon
@LGSon Ja, ich weiß, dass es alt ist, aber ich denke, das scheint eher ein Fehler (als dieser alte Post) als ein Problem, also wies ich diesen Link als ein einfaches Beispiel, so dass er auf diese Weise suchen kann, weil sich Transstion oder Animation gleich verhalten Ich vermute. –