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/