CSS 动画涉及 Safari 上的不透明度、比例和平移 Y 问题

Question

除了不透明度之外，我还使用CSS变换(缩放和平移Y)放大和向下移动三个箭头的动画。它在Chrome，Firefox中工作正常。但 Safari 只显示一个小箭头淡入淡出。请访问 jsfiddle 获取使用 SCSS 的演示。

https://jsfiddle.net/hyanqerL/

以下是我在使用 Mig 的建议后现在在我的项目中使用的内容(我没有在 js 小提琴中包含所有混音。它们用于前缀)。它有所改进，但在Safari上仍然有问题。

$base: 9.6px;
.scroll-animation {
position: absolute;
width: 100%;
height: rem(41);
bottom: rem(24);
@include flexbox;
@include justify-content(center);
&:focus {
outline: none;
}
.chevron {
position: absolute;
width: $base * 3.35;
height: $base * .3;
opacity: 0;
@include transform(scale(.3));
@include animation-name(move-chevron);
@include animation-duration(3.15s);
@include animation-timing-function(linear);
@include animation-iteration-count(infinite);
}
.chevron:first-child {
@include animation-delay(0.28s);
}
.chevron:nth-child(2) {
@include animation-delay(0.66s);
}
.chevron:before, .chevron:after {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 50%;
background: white;
}
.chevron:before {
left: 0;
@include transform(skewY(30deg));
}
.chevron:after {
right: 0;
width: 50%;
@include transform(skewY(-30deg));
}
@keyframes move-chevron {
0% {
opacity: 0;
@include transform(translateY(0) scale(.3));
}
33.3% {
opacity: 1;
@include transform(translateY($base * 2.8) scale(1));
}
53.2% {
opacity: .2;
@include transform(translateY($base * 4.65) scale(0.3));
}
60.7% {
opacity: 0;
@include transform(translateY($base * 5.15) scale(0));
}
100% {
opacity: 0;
@include transform(translateY($base * 5.15) scale(0));
}
}
}

Answer 1

需要注意的一件事是，浏览器可能会对这样一个事实很敏感，即为了进行动画处理，您需要相似的值。在您的情况下，如果您为不透明度和缩放设置动画，最好确保始终在变换中具有这两个函数，以便可以进行过渡(包括不在关键帧中的默认变换)。使用中性值来填充空白(例如translateY(0em) scale(0.3))。

Chrome似乎足够聪明，可以进行二次猜测，但我在Safari中尝试过，现在我可以看到缩放。尽管仍然有一些奇怪的事情：Safari 似乎不喜欢翻译中的rem值。或者至少它看起来要小得多。我尝试了em，看起来不错。如果您想要成比例的东西，请使用rems 后面的百分比，因为 V 形的尺寸以rems 为单位。

如果您在实施此方面有任何运气，请在评论中告诉我。

除此之外，如前所述，请确保您具有所需数量的前缀(包括关键帧块的每个前缀版本)。您正在使用 Sass，所以它应该很容易。

还要确保修复 jsFiddle 给出的警告，并在侧面显示一个黄点。你永远不知道哪个浏览器会大惊小怪，所以你不妨在浮点数和双冒号版本的before和after上有一个前导 0 .

我相信您的工作版本中大部分内容，因为您的 jsFiddle 只是为了帮助我们跟踪问题，但对于阅读答案的初学者来说也值得一提。