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

Question

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

这在 Firefox 中效果很好。在 Chrome 和 Safari 中，当您离开悬停区域时，不透明度会重新回到 0.4，而不是从 1 缓和到 0.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 属性，因此浏览器渲染“all 10s”和“opacity 5s”之间存在冲突

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

这是一个小提琴：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;}