Question

我正在玩CSS3过渡的图像交换悬停效果。很遗憾，它仅适用于Chrome。我见过很多来自CSS3过渡的例子，在Chrome，Firefox和Safari中完美无缺，但这次不是...... :( 问题在哪里？

.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;
}

干杯！

Answer 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;
}

Answer 2

至少对于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/

Answer 3

可以用伪元素完成。

.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/

CSS3过渡在Firefox，Safari和IE中不起作用

3 个答案: