CSS3不透明轉換在Safari中不起作用

Question

我有一個超簡單的CSS3轉換：只是一個淡出的圖像。

它適用於除Safari之外的所有瀏覽器（在Safari 8.0.7上測試過）。我錯過了什麼？

這裏是小提琴：https://jsfiddle.net/nerdess/9Lambqan/

下面是代碼：

.fade { 
 
    background: url(https://placeimg.com/200/100) no-repeat; 
 
    width: 200px; 
 
    height: 100px; 
 
    animation-duration: 3s; 
 
    animation-iteration-count: 1; 
 
    animation-name: fadeOut; 
 
    animation-timing-function: ease-in; 
 
    animation-fill-mode: forwards; 
 
    -webkit-animation-duration: 3s; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-name: fadeOut; 
 
    -webkit-animation-timing-function: ease-in; 
 
    -webkit-animation-fill-mode: forwards; 
 
} 
 

 
@keyframes fadeOut { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
}

<div class="fade"></div>

（我知道有已位於處理這一主題的各種計算器的職位，但什麼都沒有了回答幫助我！）

Answer 1

使用-webkit-keyframes

.fade { 
 
    background: url(https://placeimg.com/200/100) no-repeat; 
 
    width: 200px; 
 
    height: 100px; 
 
    animation-duration: 3s; 
 
    animation-iteration-count: 1; 
 
    animation-name: fadeOut; 
 
    animation-timing-function: ease-in; 
 
    animation-fill-mode: forwards; 
 
    -webkit-animation-duration: 3s; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-name: fadeOut; 
 
    -webkit-animation-timing-function: ease-in; 
 
    -webkit-animation-fill-mode: forwards; 
 
} 
 

 
@-webkit-keyframes fadeOut { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 
@keyframes fadeOut { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
}

<div class="fade"></div>

看看這個CSS的技巧頁面來查看所有的相容性越好。

https://css-tricks.com/snippets/css/keyframe-animation-syntax/