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

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

CSS Webkit关键帧在Safari中不起作用

1 个答案: