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>

（我知道有很多关于这个主题的 stackoverflow 帖子，但没有一个答案对我有帮助！）

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-tricks 页面，尽可能查看所有兼容性。

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