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

Question

我正在玩带有 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;
}

干杯!

Answer 1

像这样把ease改成ease-in-out

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