CSS3 过渡在 Firefox、Safari 和 IE 中不起作用答案

【问题标题】：CSS3 transition doesn't work in Firefox, Safari and IECSS3 过渡在 Firefox、Safari 和 IE 中不起作用
【发布时间】：2017-10-11 19:43:17
【问题描述】：

我在玩带有 CSS3 过渡的图像交换悬停效果。不幸的是，它只适用于 Chrome。我已经看到了很多来自 CSS3 过渡的例子，它们在 Chrome、Firefox 和 Safari 中都能完美运行，但这次不是...... :( 问题出在哪里？

http://jsfiddle.net/kYZ9Y/

.logo {
float: left;
z-index: 1;
width: 325px;
height: 73px;
background: url(../img/logo.png) no-repeat;
position: absolute;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}

.logo:hover {
z-index: 2;
opacity: 1;
background: url(../img/logo1.png) no-repeat;
}

干杯！

【问题讨论】：

jsfiddle.net/kYZ9Y

标签： css css-transitions browser-support

【解决方案1】：

只需像这样将轻松更改为缓入出

-moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;

演示：http://jsfiddle.net/kYZ9Y/4/

更多缓动功能请到http://easings.net/

标记：

<div class="logo"></div>

风格：

.logo {
    float: left;
    z-index: 1;
    width: 300px;
    height: 225px;
    background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
    position: absolute;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.logo:hover {
    z-index: 2;
    opacity: 1;
    background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
}

【讨论】：

【解决方案2】：

可以用伪元素来完成。

.logo {
    background: url(http://via.placeholder.com/300?text=Normal) no-repeat;
    width: 300px;
    height: 300px;
    position: relative;
}
.logo:after {
    content: "";
    opacity: 0;
    display:block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(http://via.placeholder.com/300?text=Hover) no-repeat;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease; 
}
.logo:hover:after {
    opacity: 1;
}

https://jsfiddle.net/84bvybjs/

【讨论】：

可爱的解决方案。每天学习新东西。

【解决方案3】：

至少对于 Firefox，根据the documentation，background-image 是不可动画的。

相反，尝试将两张图片放在一起并为opacity 属性设置动画：

.logo {
    float: left;
    z-index: 1;
    width: 300px;
    height: 225px;
    background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
    position: absolute;
}

.logotop {
    float: left;
    z-index: 2;
    width: 300px;
    height: 225px;
    background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
    position: absolute;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.logotop:hover {
    opacity: 0;
}

HTML：

<div class="logo"></div><div class="logotop"></div>

小提琴：http://jsfiddle.net/kYZ9Y/2/

【讨论】：

非常感谢，这解决了我的问题:)