CSS webkit 关键帧在 safari 中不起作用

Question

我有以下 CSS 动画:

.fade-in {
    opacity: 0; /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;

    -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

.fade-in.one {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.fade-in.two {
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.fade-in.three {
    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
    animation-delay: 1.7s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

为什么它不能在 Safari 上运行？

我已经测试过，safari 桌面版和移动版都无法正常工作。

我也用 chrome 在我的 ios 中打开它，但效果不佳。

它仅适用于桌面 chrome 和桌面 mozilla。

检查链接:

https://festive-shockley-460d95.netlify.com

Answer 1

这可能是个问题，因为只有某些动画类型在 safari 中有效。如果您想了解更多相关信息，请参阅此链接。 https://caniuse.com/#feat=css-animation因此，您的 safari 版本可能不是导致动画无法正常工作的最新版本。欢迎...