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前綴（保留前綴關鍵幀前綴，但）。