CSS3不透明度转换无法在Safari

时间:2015-11-24 10:05:26

标签: css3 safari webkit

我有一个超级简单的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帖子可以处理这个主题,但没有一个答案帮助了我!)

1 个答案:

答案 0 :(得分:2)

使用-webkit-keyframes

&#13;
&#13;
.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; }
}
&#13;
<div class="fade"></div>
&#13;
&#13;
&#13;

看看这个css-tricks页面,尽可能查看所有兼容性。

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