Question

我对css和css动画不是很熟悉。我为一些照片制作了一个淡入动画。它们确实很好用，但不适用于旧的Safari浏览器。

我的一位朋友使用Safari 5.1.10并且图片无法显示。

我能做些什么呢？它会播放动画或如何告诉浏览器“如果你的年龄太大，那么只需忽略动画并显示图片”？

这是css：

 .column-image > div picture > img{
  opacity: 0;
  animation-name: fadein;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

#c1163 > div > div:nth-child(2) > div picture > img{
    animation-delay: 0.5s;
}

#c1163 > div > div:nth-child(6) > div picture > img{
    animation-delay: 1s;
}

#c1163 > div > div:nth-child(7) > div picture > img{
    animation-delay: 1.5s;
}


#c1163 > div > div:nth-child(11) > div picture > img{
    animation-delay: 2s;
}


#c1163 > div > div:nth-child(12) > div picture > img{
    animation-delay: 2.5s;
}

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

Answer 1

这是因为您需要在动画属性中添加供应商前缀，因为在旧版本中，他们会考虑实验性的＃39;。查看我可以使用的support for Animations吗？ Safari 5.1需要-webkit-前缀。

当您更改为以下代码时，您的代码应该有效：

{{1}}

opacity属性没问题，并且有很好的支持，并且没有要添加的前缀。其他浏览器也有其他供应商前缀，因为您已经使用过，但只有动画版本的webkit前缀可以正常使用（保留前缀关键帧前缀虽然）。

CSS动画不适用于较旧的Safari浏览器

1 个答案: