CSS 过渡比例/不透明度悬停兼容性

Question

我有两张并排的图片。目标是当您将鼠标悬停在它们上方时，它们会缓慢展开和淡入(同时包含在一个 div 中)。当您将鼠标移出悬停区域时，它们会恢复到原始状态。

这在 Firefox 中非常有效。在 Chrome 和 Safari 中，当您离开悬停区域时，不透明度会迅速回到 .4，而不是从 1 缓和到 .4(在 Firefox 中完美运行)。我错过了什么吗？

编辑/注意:不透明度需要比缩放图像更快地淡入。

#img-wrapper {
    width: 1100px;
    margin: 0 auto;
    position: relative;
    height: 550px;
}

.footer-btn a {
    font-weight: bold;
    line-height: 63px;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
}
.footer-btn {
    position: absolute;
    z-index: 9000;
    margin-top: 240px;
    -moz-box-sizing: border-box;
    background-color: #000;
    height: 63px;
    width: 400px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
}
.box {
    width: 550px;
    height: 550px;
    text-align: center;
    overflow: hidden;
    float: left;
}
.box img {
    width: 556px;
    height: 556px;
    padding: 0px;
    overflow: hidden;
    position: relative;

}
.footer-box {
    display: table;
    max-height: 550px;
    position: absolute;
    z-index: 9000;
}
.footer-box .blog {
    height: 556px;
    -webkit-transition: all 10s, opacity 5s;
    -moz-transition: all 10s, opacity 5s;
    -o-transition: all 10s, opacity 5s;
    -ms-transition: all 10s, opacity 5s;
    transition: all 10s, opacity 5s;
    opacity: .4;
}

.footer-box:hover .blog {
    cursor: pointer;
    height:556px;
    width: 556px;
    transform:scale(1.15);
    -ms-transform:scale(1.15); /* IE 9 */
    -moz-transform:scale(1.15); /* Firefox */
    -webkit-transform:scale(1.15); /* Safari and Chrome */
    -o-transform:scale(1.15); /* Opera */
    opacity: 0.9;
}

    <div id="img-wrapper">
        <div class="footer-box">
            <div class="box">
                <div class="footer-btn"><a class="btn" href=''>Button Text</a></div>
                <img class="blog" src="images/footer-splash-left.jpg" alt="">
            </div>
        </div>
        <div class="footer-box" style="right:0px;">
            <div class="box">
                <div class="footer-btn"><a class="btn" href=''>Button Text</a></div>
                <img class="blog" src="images/footer-splash-right.jpg" alt="">
            </div>
        </div>
    </div>

Answer 1

看起来您在转换中指向两个不同的 css 属性，因此浏览器呈现“全 10 秒”和“不透明度 5 秒”之间存在冲突

如果您将图像包装在一个 div 中，并为该 div 提供一个包含所有不透明度样式的类，一切都应该有效。

这是一个 fiddle :http://jsfiddle.net/MathiasaurusRex/q3RNS/

<div class="opacityWrapper">
<img class="blog" src="http://lorempixel.com/400/200/" alt="">
</div>

.opacityWrapper{
   -webkit-transition:opacity 5s;
    -moz-transition:opacity 5s;
    -o-transition:opacity 5s;
    -ms-transition:opacity 5s;
    transition:opacity 5s; 
    opacity:.3;
}

.footer-box:hover .opacityWrapper{opacity:.9;}