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

＆＃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;

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

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

CSS3不透明度转换无法在Safari

1 个答案: