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

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

这是因为你需要供应商前缀添加到动画属性，因为在旧版本中他们认为“实验性”。查看我可以使用的support for Animations吗？ Safari 5.1需要-webkit-前缀。当更改为以下

您代码应工作：

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

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

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

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


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


#c1163 > div > div:nth-child(12) > div picture > img{ 
    animation-delay: 2.5s; 
    -webkit-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; 
    } 
} 

的opacity属性是好的，具有相当不错的支持，并且没有前缀的补充。对于其他浏览器，还有其他供应商前缀，因为您已经使用过，但只有动画的前缀为webkit前缀（保留前缀关键帧前缀，但）。