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の接頭辞で大丈夫です。